vue中从后台获取的列表，v-for循环在页面上，针对鼠标移入移出的效果 只针对移入的元素有影响

效果  鼠标移入出现遮罩层，鼠标移出遮罩层消失  只针对当前鼠标移入的元素 ，对兄弟元素没有影响

在data里面定义seen  和 current

 current: 0,//复制成功提示显示或者隐藏 
seen: false, //显示和隐藏

html代码  之前有写过v-for循环的

  

        

          
          

            

              
              
              
            
            
素材名称
              {{item.materialName}}
            
            {{item.updateBy}}
            {{item.updateDate}}
          
        
      

在methods中写鼠标移入和移出事件

methods：{
    onMousteIn: function(index) {
      this.seen = true; //鼠标移入显示
      this.current = index;
    },
    onMousteOut: function(index) {
      this.seen = false; //鼠标移出隐藏
      this.current = null;
    },
}

完成