码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中的计算属性和侦听属性

时间:2020-01-30 14:33:07      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:dem   foo   多个   span   变化   put   strong   str   重复   

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中的计算属性和侦听属性

标签:dem   foo   多个   span   变化   put   strong   str   重复   

原文地址:https://www.cnblogs.com/yizhiran/p/12242547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!