实现鼠标移入移出显示隐藏元素

我做了两个方案：

1.css版本（利用opacity）

<template>
  <div class="container" >
    <table>
      <thead>
        <tr>
          <th>表头</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>今天<img src="../public/add.png" ></td>
        </tr>
        <tr>
          <td>今天<img src="../public/add.png" ></td>
        </tr>
        <tr>
          <td>今天<img src="../public/add.png" ></td>
        </tr>
        <tr>
          <td>今天<img src="../public/add.png" ></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="less" scoped>
*{
  padding: 0;
  margin: 0;
}
.container table{
  width: 500px;
  tbody {
    width: 500px;
    tr {
      height: 4vh;
      line-height: 4vh;
      td{
        position: relative;
        img{
          position: absolute;
          height: 3vh;
          width: 3vh;
          top: 0.3vh;
          right:0;
          opacity: 0;
        }
        &:hover img{
          opacity: 1;
        }
      }
    }
  }
}
</style>

2. 利用mouseenter、mouseleave事件     v-show变量控制显示隐藏

<template>
  <div class="container" >
    <table>
      <thead>
        <tr>
          <th>表头</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in dayList" :key="index">
          <td v-on="{mouseenter:showImg,mouseleave:hiddenImg}">{{item}}<img src="../public/add.png" v-show="showPic"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>


export default {
  data () {
    return {
      showPic: false,
      dayList: ['今天', '明天', '后天', '万天']
    }
  },
  methods:{
    showImg () {
      this.showPic = true
    },
    hiddenImg () {
      this.showPic = false
    }
  }
}
</script>

<style lang="less" scoped>
*{
  padding: 0;
  margin: 0;
}
.container table{
  width: 500px;
  tbody {
    width: 500px;
    tr {
      height: 4vh;
      line-height: 4vh;
      td{
        position: relative;
        img{
          position: absolute;
          height: 3vh;
          width: 3vh;
          top: 0.3vh;
          right:0;
          opacity: 0;
        }
        &:hover img{
          opacity: 1;
        }
      }
    }
  }
}
</style>