Vue实现多选、单选的样式切换

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
      }
    }