单选事件与多选事件

1.单选事件

<template>
  <div class="hello">
    <ul>
      <li 
      v-for="(list, index) in list"
      :class="{'active':ind === index}"
      @click="changeBgc(index)">{{list}}</li>
    </ul>
  </div>
</template>
data () {
   return {
     list: ['苹果', '香蕉', '菠萝', '芒果'],
     ind: ''
   }
 },
 methods: {
   changeBgc: function (index) {
     this.ind = index
   }
 }
【example】
<div v-bind:class="{ active: isActive }"></div>

2.多选事件

1【template】
<div class="test">

  <div class=mul-chose">

    <ul>
      
<li v-for="(item, index )in mulList" 
         @click="mulclick(index)"
         :class="{mulactive: arr[index]}>
         {{item.name}}
      </1i
>
    </u1
>
2.【data】

  mulLis
t:[
    {name：'选择一
'},
    {name：'选择二
'},
    {name：'选择三
'},
    {name：'选择四
'},
    {name：'选择五
'},
    {name：'选择六
'},
    {name：'选择七
'},
  ],
  arr
:[]
3.【mounted】
  mounted（){
    
this. initfunc();
  }

4.【方法】

mulclick (index){

  for (let i=0: i< this arr length: i++){
    
if (i === index){

      this arr [index] 
      ? this arr splice(index, 1, false)
      : this arr splice(index, 1, true)
    }
  }
},
initfunc(){
  for (let i=0: i<this.mulList.length;i++){
    
this.arr.push(false);
  }
}