遍历的时候鼠标移入框,让框中图片切换颜色

 

<div  class="product_item" v-for="(item, index) in productList" :key="index" @mouseover="mouseOver(index)" @mouseleave="mouseLeave">
       <img class="product_img" :src="require('../../assets/imgs/cpgn' + Number(index + 1) + '_col.png')"/>
       <img v-if="mouseActive&&(mouseIndex == index)" class="img_white" :src=" require('../../assets/imgs/cpgn' + Number(index + 1) + '_whi.png')"/>
 </div>
  mouseActive: false, //鼠标移入
  mouseIndex:0,
  // 移入
  mouseOver(index) {
    this.mouseActive = true;
    this.mouseIndex =index;
  },
  // 移出
  mouseLeave() {
      this.mouseActive = false;
  },

 

上一篇:Vue中的v-for


下一篇:什么是高防?有什么用?