Vue.js鼠标悬浮更换图片

Vue.js鼠标悬浮更换图片

最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片，大致实现出来的效果就是这样：

这个在jQuery中是个很简单的事，但是在vue中我还是第一次实现。

首先将所有的选中后图片都覆盖到没选中图片上

html代码如下

      <ul>
          <li>
            <a href="">
              <img src="../../../img/goods/study.png" alt="学习">
              <img class="hide_tab" src="../../../img/goods/study_1.png" alt="学习">
            </a>
          </li>
          <li>
            <a href="">
              <img src="../../../img/goods/life.png" alt="生活">
              <img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
            </a>
          </li>
          <li>
            <a href="" >
              <img src="../../../img/goods/sport.png" alt="运动">
              <img class="hide_tab" src="../../../img/goods/sport_1.png" alt="运动">
            </a>
          </li>
          <li>
            <a href="">
              <img src=