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>