Javascript 在vue框架中悬停更改多元素数据

我是vue的新手！我有3个div，所有div都有一个消息数据源！我绑定了一个方法，当悬停在一个div上时，它将更改消息！这东西运行正常，但它改变了div的所有信息！我知道这是合乎逻辑的！但我怎么能只更改悬停的元素数据呢！不影响别人

这是我的名片

Html是：

<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>

---

您需要创建单独的数据绑定，每个消息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>

这毫无意义，因为消息将在所有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>

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

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