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

样式切换在实际项目应用中，也是非常常用的，这里就说一下在vue框架中多选和单选的实现。

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：要更改的数据源(可以是对象或者数组)
//key：要更改的具体数据
//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
      }
    }