vue.js将jpg替换为鼠标上方的动画gif

Question

我有一个用vue.js呈现的视频海报图像/JPG列表。在鼠标悬停时，这些图像应替换为gif动画。在mouseout上，我希望再次看到图像/jpg。因此，我能够跟踪mouseover/out事件，但替换src属性并没有按预期工作：

<div v-for="video in videos">
    <img 
      v-on:mouseover="mouseOver(video.id)" 
      v-on:mouseout="mouseOut(video.id)" 
      v-bind:src="mouse[video.id] === 1 ? 'images.gif' : 'images.gif'"
    />    
</div>


var app4 = new Vue({
  el: '#app-videomanager',
  router,
  data: {
    mouse: {} // the id is alphanumeric
  },
  computed: {
    videos() {
      return store.state.videos; // not included in the example
    }
  },
  methods: {
    mouseOver: function(id) {
      this.mouse[id] = 1;
    },
    mouseOut: function(id) {
      this.mouse[id] = 0;
    }
  }
});

替换mouseOver和mouseOut函数中的src属性，而不是在组件模板中放入太多逻辑，这有意义吗？如何在vue.js中操作DOM的这一部分？

Answer 1

这里有一个解决方案：

在组件中声明mouseOvercheck。请注意，我更改了如何将data属性声明为函数：

data () {
    return {
        mouseOverCheck: ''
    }
}

然后在HTML中执行以下操作：

<img 
    v-on:mouseover="mouseOverCheck = video.id" 
    v-on:mouseout="mouseOverCheck = ''" 
    v-bind:src="mouseOverCheck === video.id ? 'images.gif' : 'images.jpg'" />