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