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}" 
Logo

前往低代码交流专区

更多推荐