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

　　

---

 

返回目錄