Ke jie and I have asked each other many times about selecting the menu like this (click highlight to distinguish the selected state), and we are always puzzled why we forgot it again. Today, write it down and carve it in the nuggets.

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>
Copy the code

data

Export default {data() {return {btnArr: [" btnArr ", "btnArr "," btnArr ",}; }Copy the code

Click on the event

selectOne(index) {
    this.isActive = index
 }
Copy the code

When clicked, assign the value of index to the variable and check whether the variable is equal to the current value of index.