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

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

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

返回目录

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄