vue computed計算屬性的get和set函式
阿新 • • 發佈:2018-12-08
get和set都是回撥函式
什麼是回撥函式:1/你定義的 2/你沒有呼叫 3/但最終執行了
關於回撥函式需要知道的兩個問題:1/什麼時候呼叫 2/用來做什麼
const vm = new Vue ({ data: { firstName; ‘A’, lastName: 'B' }, computed: { fullName: { //1/當需要讀取當前屬性值時呼叫(初始化)/當依賴項變化時也呼叫該回調函式 2/根據相關資料計算並返回當前屬性值 get () { return firstName + ' ' + lastName; }, //1/監視:當屬性值變化時呼叫該回調函式 2/根據最新的屬性值計算相關資料 set (value) { //fullName是要監聽的屬性,value是fullName的最新屬性值 this.firstName = value.split(' ').[0]; this.lastName = value.split(' ').[1]; } } } })
html
姓:<input type="text" v-model="firstName" />
名:<input type="text" v-model="lastName" />
姓名:<input type="text" v-model="fullName" /> //計算屬性不能加()