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
}
}
})此方法名必须与需要监听的data属性名一致才能实现有效的监听。
如将HTML改为
<input v-model="firstName">
<div id="demo">{{ fullName }}</div>然后将vm实例watch中的firstName方法改为firstName1则当输入内容的时候无法实现对firstName进行监听。
当然watch一般不这样用，这里用计算属性。当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)