亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Vue 計算屬性和使用的小技巧

標簽:
Vue.js

1, 计算属性可以进行复杂的逻辑处理,只要返回一个结果就可以
2,每一个计算属性都有setter,getter
<div>{{ fullName }}</div>

var app =  new Vue({    el: '#app',    data : {        firstName: 'H',        lastName: 'L'
      },    computed: {        fullName: {             //  getter ,用于读取
            get : function () {                return this.firstName + ' ' +this.lastName  
              },            // setter , 写入时触发
              set : function (newValue) {                  var names = newValue.split(' ')                  this.firstName = names[0]                  this.lastName = names[names.length - 1]
              }
          }
      }
})

当执行 app.fullName = 'John Doe'时,setter就会被调用

小技巧:
(1),计算属性可以依赖其他计算属性
(2),计算属性不仅可以依赖当前的Vue实例的数据,还可以依赖其他实例的数据

同样在methods里定义的一个方法也可以实现同样的效果,为什么还要使用计算属性,因为一个计算属性是几句他的依赖缓存的,一个计算属性所依赖的数据发生变化是,它才会从新获取值。



作者:是归人不是过客
链接:https://www.jianshu.com/p/cd5929a7dc95


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消