vue中点击对应div(span、li)改变颜色
vue中点击后改颜色一 点击后改变颜色的原因::class="{active:真值}"时,显示样式:class="{active:假值}"时,不显示样式二具体代码实现:1 在data中添加一个值作为判断的介质data(){return{currentIndex: 0,}}2div的写法,注意:将遍历的index传入方法中。<divv-for="(item,index) in search_r
·
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}"
更多推荐
已为社区贡献3条内容
所有评论(0)