v-for循环出来的容器悬停后单独更换图片

解决问题后的效果如图，这五个方块是v-for循环产生的，在这里我想要鼠标悬停某一个方块的时候，更换他的图片，图片有两种，一种是默认的，一种是选中状态的，这里就是要鼠标移入，就单独更换他的图片为选中的，其他的不改变，移出后就变回默认的图片。

这里的最主要的问题是，v-for循环产生的方块，我们使用的class就都是一种的，这个没办法改变，class的hover事件也写不出来（也许是博主目前能力不够），改变class这样写，就所有的图片都变了，而我只想改变我想改变的那个。
当然不用v-for，一个一个的写出来也是可以的，不过有些麻烦。

所以现在这里我想到的办法，就是在style上面。
这里是我的html的循环代码，可以看到是采用的是mouseenter和mouseleave两个方法来看现在鼠标到底是在那个方块上面，把那个方块的图片名传了进去，如果移入的话，就传了一个‘hover’进去，没有的就都不传。
然后下面循环的图片地址src，用了一个方法，来获取他的url，而不是写死。

   <div class="data-content-body" v-for="item in dataBoxs" :key="item.index"
       @mouseenter="changeImageSrc(item.uri, 'hover')"
       @mouseleave="changeImageSrc(item.uri, '')"
   >
     <div style="height:32px"></div>
     <img class="data-content-body-box" :src="getUrl(item.uri)" alt="">
     <p class="data-content-body-box-title">{{item.title}}</p>
     <p class="data-content-body-box-value">{{item.value}}</p>
   </div>

当这个代码循环产生之时，我的changeImageSrc函数，接受两个参数，第一个参数是图片名，第二个参数是时候悬停，然后把悬停的那个图片名字存到放在data的dataImgChoose里面，默认是空。
这个函数主要的功能就是找到现在鼠标在那个方块之上，那个方块的图片名字是什么

    changeImageSrc (key, way) {
      if (way === 'hover') {
        this.dataImgChoose = key
      } else {
        this.dataImgChoose = ''
      }
    }

这个函数是获取图片地址的函数，传进来图片名字，然后找到上面在data里面存的图片名字一样的名字，把他的图片地址改为后面加上hover的图片，其他没有的就都不变，这样就能单独更换图片啦～ 是不是很简单。

   getUrl (uri) {
      if (uri === this.dataImgChoose) {
        return require('./../assets/image/' + uri + 'Hover' + '.png')
      } else {
        return require('./../assets/image/' + uri + '.png')
      }
    },