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

计算属性的getter和setter

时间:2020-01-30 14:45:18      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:dem   v-model   model   new   变量   col   last   zha   return   

setter:设置值时触发,

getter:获取值时触发,

vue中computed属性默认为getter,但是它还提供了setter,可以由因变量去影响自变量。

 1 computed: {
 2   fullName: {
 3     // getter
 4     get: function () {
 5       return this.firstName + ‘ ‘ + this.lastName
 6     },
 7     // setter
 8     set: function (newValue) {
 9       var names = newValue.split(‘ ‘)
10       this.firstName = names[0]
11       this.lastName = names[names.length - 1]
12     }
13   }
14 }

需要注意的是,不是说我们更改了getter里使用的变量,就会触发computed的更新,前提是computed里的值必须要在模板里使用才行。如下:

 1 <template>
 2     <div id="demo">
 3          <!-- <p> {{ fullName }} </p> -->
 4          <input type="text" v-model="firstName">
 5          <input type="text" v-model="lastName">
 6     </div>
 7 </template>
 8  
 9 var vm = new Vue({
10   el: ‘#demo‘,
11   data: {
12     firstName: ‘zhang‘,
13     lastName: ‘san‘
14   },
15   computed: {
16     fullName: function () {
17       console.log(‘computed getter...‘)
18       return this.firstName + ‘ ‘ + this.lastName
19     }
20   },
21   updated () {
22      console.log(‘updated‘)
23   }
24 })

注释div中的fullName语句,当firstName或者lastName改变时,console.log(‘computed getter...‘)不会改变。

还需要注意的是,并不是触发了setter也就会触发getter,他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。

计算属性的getter和setter

标签:dem   v-model   model   new   变量   col   last   zha   return   

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

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