Vue的侦听属性可以使用 watch ,它可以监听多个变量,一旦它们发生了变化,就执行function函数,var代表的是这个发生变化了的参数。
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 } } })
但是这有一个不方便的地方,它是命令式且重复的。实际上我们想根据firstName和lastName的值来得到相应的fullName,所以直接计算fullName的值,使用computed属性:
1 var vm = new Vue({ 2 el: ‘#demo‘, 3 data: { 4 firstName: ‘Foo‘, 5 lastName: ‘Bar‘ 6 }, 7 computed: { 8 fullName: function () { 9 return this.firstName + ‘ ‘ + this.lastName 10 } 11 } 12 })
我发现在data中可以不用先定义fullName,这与watch属性又不一样。
原文地址:https://www.cnblogs.com/yizhiran/p/12242547.html
时间: 2024-10-28 19:13:42