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