Vue 中，實現當前激活按鈕的高亮狀態 （寫導航的激活狀態也是同樣的道理）

• 需求：

  實現如圖示的按鈕高亮效果（默認高亮第一個）：
  
  點擊內容爲‘未開始’這個 button 的時候，它高亮：
  

• 思路：

1. 使用原生`button`按鈕，自己寫樣式，實現基本樣式，再寫一個激活狀態的樣式（背景藍色，字體白色），控制激活樣式的條件`flag`，通過綁定class實現效果；(`flag`可以設置爲數字，也可以是文本，最好是和按鈕的內容相關)；

2. 使用`Element`的`Button`按鈕，因爲激活的樣式恰好是，`Element`的 **`el-button`** 中的 **`type='primary'`** 的樣式,故考慮到這裏可以直接更改`type`的類型來處理激活狀態。
		 
3.  這四個`button`可以用`Vue`的`v-for`指令循環出來，也可以是挨個排列出來；

一、使用原生的button按鈕

• 用 v-for 循環:，用index關聯 激活條件，控制class
• 用 v-for 循環:，用 name關聯 激活條件，控制class
  兩種均可。
  1. btn_active爲激活狀態的類名；
  2. flagN===item.name爲激活條件；當flagN等於當前的name屬性值時，btn_active纔會被設到這個button上；flagN 默認是navList的第一個name屬性值;
  3. 給按鈕綁定方法handleClickBtnN，點擊當前按鈕，將flagN 賦值爲當前的name值

<template>
    <div>
     
      <div class="common-btn">
        <button :class="{'btn_active':flagX===(index+1)}" v-for="(item,index) in navList" :key="item.id" @click="handleClickBtnX(index)">{{item.name}}</button>
      </div>
      
      <div class="common-btn">
        <button :class="{'btn_active':flagN===item.name}" v-for="item in navList" :key="item.id" @click="handleClickBtnN(item.name)">{{item.name}}</button>
      </div>
      
    </div>
</template>
<script>
export default {
  data () {
    return {
      navList: [
        { name: '全部' },
        { name: '未開始' },
        { name: '進行中' },
        { name: '已結束' }
      ],
      flagX: 1,
      flagN: '全部'
    }
  },
  methods: {
    handleClickBtnX (index) {
      this.flagX = index + 1
    },
    handleClickBtnN (name) {
      this.flagN = name
    }
  }
}
</script>
<style lang="scss">
.common-btn{
    button{
        display: inline-block;
        width: 150px;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        outline: 0;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        margin-right: 10px;
    }
    .btn_active{
        background: #409EFF;
        color: #fff;
    }
}
</style>

• 不用 v-for 循環 （不推薦）
  1. btn_active爲激活狀態的類名；
  2. flag===？爲激活條件；？是當前的值，flag默認是1；
  3. 給按鈕綁定方法，點擊當前按鈕，點擊改變flag的值；

<template>
    <div>
       <div class="common-btn">
          <button  :class="{'btn_active':flag===1}" @click="flag=1">全部</button>
          <button  :class="{'btn_active':flag===2}" @click="flag=2">未開始</button>
          <button  :class="{'btn_active':flag===3}" @click="flag=3">進行中</button>
          <button  :class="{'btn_active':flag===4}" @click="flag=4">已結束</button>
       </div>
    </div>
</template>
<script>
export default {
	data(){
		return {
		flag:1
	}
	}
}
</script>
<style lang="scss">
.common-btn{
    button{
        display: inline-block;
        width: 150px;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        outline: 0;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        margin-right: 10px;
    }
    .btn_active{
        background: #409EFF;
        color: #fff;
    }
}
</style>

二、使用Element的Button 按鈕

• 用 v-for 循環:，用index關聯 激活條件，控制type
• 用 v-for 循環:，用 name關聯激活條件，控制type
  兩者均可。

<template>
    <div>
      <div class="ele-btn">
        <el-button :type="flagE===(index+1)?'primary':''" v-for="(item,index) in navList" :key="item.id" @click="handleClickBtnE(index)">{{item.name}}</el-button>
      </div>

      <div class="ele-btn">
        <el-button :type="active===item.name?'primary':''" v-for="item in navList" :key="item.id" @click="selected(item.name)">{{item.name}}</el-button>
      </div>

    </div>
</template>
<script>
export default {
  data () {
    return {
      navList: [
        { name: '全部' },
        { name: '未開始' },
        { name: '進行中' },
        { name: '已結束' }
      ],

      flagE: 1,
      active: '全部'

    }
  },
  methods: {
    handleClickBtnE (index) {
      this.flagE = (index + 1)
    },
    selected (name) {
      this.active = name
    }
  }
}
</script>
<style lang="scss">
.ele-btn{
  button{
    width: 150px;
  }
}
</style>