样式切换在实际项目应用中，也是非常常用的，这里就说一下在vue框架中多选和单选的实现。
css选中样式
.active{
color:red
}
多选
<li class="select"
v-for="(item,index) in leftnav"
:class="{active:item.active}"
@click="ClickActive(item,index)"
>{{item.name}}
</li>
data() {
return {
leftnav: [
{name: '首页'},
{name: '它的'},
{name: '你的'}
],
}
},
methods:{
ClickActive(item,index){
if(item.active){
Vue.set(item,'active',false) //为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法
}else{
Vue.set(item,'active',true)
}
}
}
//Vue.set(object, key, value)
//object：要更改的数据源(可以是对象或者数组)
//key：要更改的具体数据
//value：重新赋的值
单选
<li class="select"
v-for="(item,index) in leftnav"
:class="{active:index == isA }"
@click="ClickActive(index)"
>{{item.name}}
</li>
data() {
return {
leftnav: [
{name: '首页'},
{name: '它的'},
{name: '你的'}
],
isA:0 //初始化第一个高亮
}
},
methods:{
ClickActive(index){
this.isA = index
}
}
