转： https://blog.csdn.net/Number7421/article/details/81002729
不过我以前都写过这三种方法了，很pang额，怕之后忘记了，偷个懒拿别人的，以免以后忘记了
一、单选：
思路：当点击的索引值 == v-for循环的索引值时，给你那个li添加选中样式
html：
CSS样式如下：
js
最后的效果如图所示
二、多选
方法一和方法二的主要的区别在于数据中有没已有标注是选中状态还是未选中状态
CSS样式如下：
方法一：
思路：新增一个新的空数组arr（arr的里元素的索引值表示，表示该索引值对应的li已经处于被选中状态），如果arr数组没有点击的索引值，就添加到arr数组里，如果有就把这个索引，就把这个索引从数组中删除。
html：
js
方法二：
思路：这个就更加通俗易懂了，把点击的那个是否选中的标志取反就可以了
html：
js
效果如图所示
template<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isSelected}">
<a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a>
</li>
</ul>
script
selectTab(selectedTab) {
this.tabs.forEach(tab =>{
tab.isSelected = (tab.name == selectedTab.name)
})
}
给每个a标签绑定一个方法，并传入当前对象作为参数
当点击时遍历所有a标签，比较当前遍历对象的某个属性（例子中的name)与传入对象的某个属性
比例结果赋值给一个flag（例子中的isSelected属性）,由这个flag去控制：class
从而实现数据驱动样式
