vue框架中多选和单选的实现。
css选中样式
.active{ color:red }
多选
<li class="select" v-for="(item,index) in array" :class="{active:item.active}" @click="ClickActive(item,index)" >{{item.name}} </li>
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:重新赋的值
单选
<li class="select" v-for="(item,index) in array" :class="{active:index == isA }" @click="ClickActive(index)" >{{item.name}} </li>
data() { return { array: [ {name: '选项一'}, {name: '选项二'}, {name: '选项三'} ], isA:0 //初始化第一个高亮 } }, methods:{ ClickActive(index){ this.isA = index } }