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

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

css选中样式

.active{
   color:red
}

多选

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

单选

      
{{item.name}}
      

data() {
      return {
        array: [
          {name: '选项一'},
          {name: '选项二'},
          {name: '选项三'}
        ],
        isA:0  //初始化第一个高亮
      }
    },
    methods:{
      ClickActive(index){
           this.isA = index
      }
    }