Vue中的计算属性和侦听属性
Posted yizhiran
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的计算属性和侦听属性相关的知识,希望对你有一定的参考价值。
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属性又不一样。
以上是关于Vue中的计算属性和侦听属性的主要内容,如果未能解决你的问题,请参考以下文章