前端控制菜单点击切换样式

像这样选择菜单的问题（点击高亮显示被选择状态区分）我和柯姐互相问了好多次了，总是会很迷为什么又忘记了，今天把它写下来，刻在掘金里。

html

<div class="flex box-sizing padding-t-24 padding-l-24 padding-b-20">
   <el-button @click="selectOne(index)" :type="isActive==index ? 'primary' : ''" v-for="(item,index) in btnArr" :key="index">{{item}}</el-button>
</div>

data

export default {
  data() {
    return {
      btnArr: ["热门视频", "初级教程", "中级教程", "高级教程"],
     
    };
  }

点击事件

selectOne(index) {
    this.isActive = index
 }

大概意思就是点击的时候把index值赋给变量，在样式处对比下变量和当前index的值是否相等即可。