樣式切換在實際項目應(yīng)用中鸟廓，也是非常常用的魏烫，這里就說一下在vue框架中多選和單選的實現(xiàn)。
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：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
//key：要更改的具體數(shù)據(jù)
//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
}
}
