vue中点击后改颜色
一 点击后改变颜色的原因:
:class="{active:真值}" 时,显示样式
:class="{active:假值}" 时,不显示样式
二 具体代码实现:
1 在data中添加一个值作为判断的介质
data(){
return{
currentIndex: 0,
}
}
2 div的写法,注意:将遍历的index传入方法中。
<div v-for="(item,index) in search_result" @click="clickDiv(index)" :class="{active: index === currentIndex}">
3 把传入的index,赋值给currentIndex。
clickDiv(val){
this.currentIndex = val2;
this.$emit('tabClick', val2);
}
4 通过index与currentIndex 比较,点击时,index正好与currentIndex相等
:class="{active: index === currentIndex}"