动态渲染图片实现鼠标悬停图片更换

有一个需求，鼠标放上就显示另外一张图片，移开恢复原图（每一张图片都是不一样的），动态渲染其图片

鼠标放上之前

鼠标放上后，左边的图片变成另外一张图片

实现的代码

//鼠标移入改变其值，移除变为原来的-1
<div class="img"  @mouseover="enterHover(index)" @mouseout="removeHover" 
:style="{'backgroundImage':isHover==index?`url(${item.people})`:`url(${item.watch})`}"></div>

// 鼠标移入
enterHover(index) {
    this.isHover = index
},
// 鼠标移出
removeHover() {
    this.isHover = -1
}