vue.js 在鼠标悬停时用动画 gif 替换 jpg

Question

我有一个用 vue.js 渲染的视频海报图像/jpg 列表。将鼠标悬停在这些图像上时，应将其替换为 gif 动画。在 mouseout 上，我希望再次看到 image/jpg。到目前为止，我能够跟踪鼠标悬停/移出事件，但替换 src-Attribute 并没有按预期工作:

<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'" />