3

我正在学习 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。如何仅对鼠标覆盖的图像进行动画处理？

4

1 回答 1

2

正如评论者指出的那样，由于您将动画应用于#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。

于 2017-06-08T14:53:27.507 回答