我是 vue 新手!我有 3 个 div,所有 div 都有消息数据(一个来源)!我绑定(bind)了一种方法,当将鼠标悬停在一个 div 上时,它会更改消息!事情工作正常,但它改变了所有 div 的消息!我知道这是合乎逻辑的!但是我怎么能只改变悬停的元素数据呢!不影响别人!
这是我的 JSFiddle .
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>
Vue:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods : {
change : function() {
this.message = "Changed"
}
}
}
)
最佳答案
您需要创建单独的数据绑定(bind),每个消息 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)
}
}
})
关于javascript - 悬停时更改 vue 框架中的多个元素数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42721091/