Question

我正在学习Vue.js，而我正在开发SPA。我通过组件递归添加一些图标作为imgs。（已经省略了很多代码来关注问题）

Vue.js

Vue.component('icon', {
  template: 
    '<img id="logo-icon" v-on:mouseover="animation" 
     class="platform_button" width="50" height="50" 
     src="../assets/img/logos/Android_icon.png" alt="img" />',

  methods: {
    animation: function(){
      animate("#logo-icon","animated bounce")
    }
  }
})

new Vue({
  el: '#apps'
})

...

html的

<div id="apps">
  ...
  <div v-for="(el, in) in x" style="width:50%">
    <icon></icon>
  </div> 
  ...
</div>

所有图像都正确显示。我想在鼠标悬停图像时启动动画。动画的功能很好，问题是无论我用鼠标悬停哪个图像，只有第一个图像会反弹。例如。如果我用鼠标img1，img1会反弹。如果我使用鼠标img5，img1将反弹而不是img5。如何仅为鼠标覆盖的图像制作动画？

Answer 1

正如评论者指出的那样，由于您将动画应用于#logo-icon，并且您在页面上有多个组件副本，因此有多个img标记与#logo-icon匹配。因此animate的行为可能只影响单个元素（第一个）或多个元素，具体取决于实现。

相反，使用Vue，您只需通过this.$el引用根元素即可。这是对您要设置动画的单个特定img元素的引用。

Vue.component('icon', {
  template: 
    '<img id="logo-icon" v-on:mouseover="animation" 
     class="platform_button" width="50" height="50" 
     src="../assets/img/logos/Android_icon.png" alt="img" />',

  methods: {
    animation: function(){
      animate(this.$el,"animated bounce")
    }
  }
})

这样做是将动画应用于组件的根元素。在这种情况下，根元素是您的img。如果组件中有多个元素，则可能需要使用ref。

组件功能仅适用于第一个组件Vue.js

1 个答案: