computed 的get 和set
阿新 • • 發佈：2018-12-12
當你讀取一個變數的時候會觸發該變數的getter. 當你修改該變數時候會觸發他的setter.
<div id="div"> <input v-model="firstName" > <input v-model="lastName"> <br /> 全名：<input v-model="fullNameFn"> </div> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部檔案--> <script> //vue js 程式碼寫在這裡 var a=new Vue({ el:"#div", data:{ firstName:"zz", lastName:"ling", fullName:"zz ling" }, computed:{ fullNameFn:{ //get 函式是讀取資料發生時呼叫 get:function(){ return this.fullName }, set:function(newVal) //set 函式是當資料發生變化時呼叫 {this.fullName=newVal, newVal=newVal.split(" "), this.firstName=newVal[0], this.lastName=newVal[1] } } } })
網頁效果：
set 函式：
這裡全名 zz ling 是觸發了 fullNameFn: 這個函式的 get 函式，獲取資料
get:function(){ return this.fullName // this.fullName 是資料屬性裡面原來有的資料},
set 函式：
修改全名 fullNameFn 對應的元素資料時，觸發了 set 函式
set:function(newVal) //set 函式是當資料發生變化時呼叫. newVal 就是新引數{ this.fullName=newVal, newVal=newVal.split(" "), this.firstName=newVal[0], this.lastName=newVal[1]
}
