vue实现鼠标移入移除照片时两个按钮的显隐

vue实现鼠标移入移除照片时两个按钮的显隐（如图）。

1、<template> （部分代码）

 <div class="box-img" v-on:mouseover="mouseoverImg(item, index)" v-on:mouseout="mouseoutImg(item, index)">（item，index是外层循环是数值和下标）

     <el-image  style="width: 100%; height: 120px"  :src="item.rldkzplj" :preview-src-list="srcList" ></el-image>

 <div ref="imgDelete" style="display: none" class="delete-img">

                        <span @click="lookBigPicture">查看大图</span>

                        <span @click="lookInfo(item)">人脸记录</span>

                      </div>

  </div>

</template>

2、<script>

  methods: {

 // 鼠标移入图片

    mouseoverImg(item, index) {

      this.$refs.imgDelete[index].style.display = "block";

    },

    // 鼠标移出图片

    mouseoutImg(item, index) {

      console.log("index", index);

      this.$refs.imgDelete[index].style.display = "none";

    },

}

</script>

说明：结合网上例子，亲测有用。