v-for产生的列表，实现active的切换

v-for生成序列

<ul>
      <li v-for="(info,index) in list" :key="info.id" @click="select(index)" v-bind:class="{'active':info.active}">{{info.name}}</li>
</ul>

data数据

list:[
        {
          name:'a',
          id:1,
          active:false
        },
        {
          name:'b',
          id:2,
          active:false
        },
        {
          name:'c',
          id:3,
          active:false
        },
        {
          name:'d',
          id:4,
          active:false
        },
      ]

点击事件

select(d){
      this.list.map(s=>s.active=false);
      this.list[d].active=true;
    },

CSS样式

<style scoped>
li.active{
  background-color: red;
}

　　

---

 

返回目录