Question

我有一个用vue.js渲染的视频海报图片/ jpgs列表鼠标悬停在这些图像上应该用gif动画代替。在mouseout上我希望再次看到图像/ 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'" />

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

1 个答案: