vue点击一个遍历后元素改变其颜色的方法,有两种情况,第一种是点击单行元素变色,点击另一行元素时,原来变色的元素变回原来的颜色,始终只有一行元素是变色的,第二种情况是点击后永久变色,点击其他元素变色不影响已经变色的元素。
第一种情况单行变色
<div v-for="(item,index) in msg">
<text :class="[{box:link==index},{box1:link!=index}]" @tap="btn(index)" >点击介绍</text>
</div>
data(){
return{
link:null
}
methods:{
btn(index){
this.link=index
}
},
第二种情况永久变色
<div v-for="(item,index) in msg">
<text :class="[{box:link[index]==index},{box1:link[index]!=index}]" @tap="btn(index)" >点击介绍</text>
</div>
data(){
return{
link:[]
}
methods:{
btn(index){
this.link[index]=index
}
},
两者的重要区别就在于变量link的使用,一个是普通变量,一个是数组,运用场景可以是标记已经点击过的标题
吃的,穿的,用的想知道成分是什么,可以用小程序成分随手查一查