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

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

在data里面定义seen  和 current

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

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

  <ul class="getData">
        <li
          v-for="(item,index) in emailMaterial"
          :key="index"
          clss="dataItem"
          @mouseenter="onMousteIn(index)"
          @mouseleave="onMousteOut()"
        >
          <!-- 鼠标移入移出 -->
          <div class="hoverMask" v-show="seen&&index==current">
            <div class="material-header">
              <i class="icon icon-more" @click="delBox()"></i>
              <i class="icon icon-search" @click="previewOff()"></i>
              <i class="icon icon-edit"></i>
            </div>
            <h4>素材名称
              <span>{{item.materialName}}</span>
            </h4>
            <span class="email-name">{{item.updateBy}}</span>
            <span class="data-time">{{item.updateDate}}</span>
          </div>
        </li>
      </ul>

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

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

完成