Vue入門之計算屬性和監(jiān)聽器

六.計算屬性和監(jiān)聽器
6.1計算屬性 computed
6.1.1存在問題
插值表達式, 可以完成表達式的計算,如果邏輯復雜時,將很難維護. 例如:

6.1.2基本使用
Vue計算屬性computed就是用來處理復雜邏輯的. 當data區(qū)域的數(shù)據(jù)變更是,將進行自動計算.

案例：字符串倒排

6.1.3computed和methods區(qū)別

計算屬性，用于實時計算，只要數(shù)據(jù)發(fā)生了更改才計算。緩存計算結(jié)果。
方法，每次調(diào)用都執(zhí)行

計算屬性

普通方法

6.1.4案例：購物車

編號	標題	單價	購買數(shù)量	小計
{{index+1}}	{{book.title}}	{{book.price}}	- {{book.count}} +	{{book.price * book.count}}
			總價：{{totalPrice}}

6.1.5高級使用

計算屬性提供了setter方法對屬性進行修改

}
},
})

案例：拆分姓名（第一版）

請輸入姓名：

姓：{{firstname}}

名：{{secondname}}

6.2監(jiān)聽器 watch

6.2.1什么是監(jiān)聽器

監(jiān)聽數(shù)據(jù)的變化

})

6.2.2基本語法

案例：拆分姓名（第二版）

請輸入姓名：

姓：{{firstname}}

名：{{secondname}}

6.2.3高級使用：監(jiān)聽對象屬性

案例：拆分姓名（第三版）

請輸入姓名：

姓：{{firstname}}

名：{{secondname}}

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴