选中项高亮显示

选中项高亮显示

 <div style="border: 1px solid red; height: 200px">
      <div  :class="{'active':index == current}" v-for="(item, index) in data" :key="index" @click="change(index)">{{ item.text }}</div>
    </div>

...
current: null,//选中项
data: [{ text: '已关联' }, { text: '未关联' }],

...    
change(x) {
    console.log(x)
    this.current = x
},    

思路：

1. 遍历数据后，通过点击事件，拿到点击的某一项的索引，赋值给current，即为当前项。
2. 绑定class，如果选中项选中项current与当前项index对比为true，就展示高亮样式。