html vue 设置单选,Vue实现多选、单选样式切换实现

vue框架中多选和单选的实现。

css选中样式

.active{

color:red

}

多选

v-for="(item,index) in array"

:class="{active:item.active}"

@click="ClickActive(item,index)"

>{{item.name}}

data() {

return {

array: [

{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：重新赋的值

单选

v-for="(item,index) in array"

:class="{active:index == isA }"

@click="ClickActive(index)"

>{{item.name}}

data() {

return {

array: [

{name: '选项一'},

{name: '选项二'},

{name: '选项三'}

],

isA:0 //初始化第一个高亮

}

},

methods:{

ClickActive(index){

this.isA = index

}

}