思路:当前点击的li标签和当前标签的索引一样的时候,动态的加上“active”属性;
代码:
<script src="./lib/vue.js"></script>
<style>
.active{
background-color: red;
}
</style>
<body>
<ul id="mylist">
<li v-for="(item,index) in list" @click="iscolor(index)" :class="current===index?'active':'' ">
{{item}}
</li>
</ul>
<script>
new Vue({
el:"#mylist",
data:{
list:["111","222","333"],
current:0
},
methods:{
iscolor(index){
console.log("red",index)
this.current=index
}
}
})
</script>
</body>
结果: