vue中的侦听属性
HTML:{{ fullName }}Vue:var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.f
·
HTML:
<div id="demo">{{ fullName }}</div>
Vue:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
watch中的firstName为一个方法,但是该方法监听的vue实例vm中同名的data属性firstName。
此方法名必须与需要监听的data属性名一致才能实现有效的监听。
如将HTML改为
<input v-model="firstName">
<div id="demo">{{ fullName }}</div>
然后将vm实例watch中的firstName方法改为firstName1则当输入内容的时候无法实现对firstName进行监听。
当然watch一般不这样用,这里用计算属性。当需要在数据变化时执行异步或开销较大的操作时,watch是最有用的。
更多推荐
已为社区贡献2条内容
所有评论(0)