Question

我是vue的新手！我有3个div，所有div都有一个消息数据（一个来源）！我绑定了一个方法，当悬停在一个div上时它将改变消息！事情很好，但它改变了所有div的信息！我知道这是合乎逻辑的！但是，我怎样才能改变那些悬停的元素数据！不影响他人！

这是我的JSFiddle。

Html Is：

<div id="app">
  <div class="one" v-on:mouseover="change">
    {{ message }}
  </div>
  <div class="one" v-on:mouseover="change">
    {{ message }}
  </div>
  <div class="one" v-on:mouseover="change">
    {{ message }}
  </div>
</div>

Vue：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },

  methods : {
      change : function() {
      this.message = "Changed"
    }
  }


}

)

Answer 1

您需要创建单独的数据绑定，每个消息div一个。有很多方法可以解决这个问题。最佳解决方案取决于您的用例。但是，这是一个简单的解决方案：

模板：

<div id="app">
  <div class="one" v-on:mouseover="change('foo', 'this is a message')">
    {{ messages.foo }}
  </div>
  <div class="one" v-on:mouseover="change('bar', 'here is a different message')">
    {{ messages.bar }}
  </div>
  <div class="one" v-on:mouseover="change('baz', 'message for baz')">
    {{ messages.baz }}
  </div>
</div>

Vue组件：

new Vue({
  el: '#app',
  data: function () {
    return { messages: {} }
  },

  methods : {
    change : function(key, message) {
      this.$set(this.messages, key, message)
    }
  }
})

在悬停时，在vue框架中更改多个元素数据

1 个答案: