Vue的綁定樣式
使用:class綁定樣式
:class綁定樣式時(shí)姿染,對(duì)象的屬性名是類選擇器的名字,屬性返回true秒际,表示添加該選擇器
對(duì)象綁定
數(shù)組綁定
:style綁定樣式時(shí)悬赏,對(duì)象的屬性名是css樣式的名稱,屬性值是具體的樣式
過濾器
創(chuàng)建過濾器
?filters: {
}
? ? ?<!-- 過濾通過管道符 | 娄徊,其實(shí)就是調(diào)用方法再把值傳進(jìn)去 -->
? ? ?<!-- 過濾器可以鏈?zhǔn)秸{(diào)用舷嗡,就是之前已經(jīng)過濾完成的結(jié)果繼續(xù)傳給下一個(gè)過濾 -->
創(chuàng)建全局過濾器
計(jì)算屬性
? ?// 計(jì)算屬性的優(yōu)勢(shì),有緩存嵌莉,當(dāng)頁面數(shù)據(jù)發(fā)生變化時(shí)进萄,所有的方法會(huì)重新調(diào)用
? ? ? ? ? ? // 當(dāng)計(jì)算屬性用到的數(shù)據(jù)發(fā)生變化時(shí),計(jì)算屬性才會(huì)重新執(zhí)行
計(jì)算屬性寫在:
computed: {
},
里,
數(shù)據(jù)的偵聽
?watch:{
? ? ? ? ? ? ? ? // 根據(jù)屬性的名稱中鼠,定義一個(gè)方法用于偵聽該屬性的變化
? ? ? ? ? ? ? ? // 這個(gè)方法會(huì)傳兩個(gè)參數(shù)可婶,第一個(gè)是新值第二個(gè)是舊值
? ? ? ? ? ? ? ? name(nval,oval){
? ? ? ? ? ? ? ? ? ? console.log(nval,oval);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // 偵聽對(duì)象需要深度偵聽
? ? ? ? ? ? ? ? students:{
? ? ? ? ? ? ? ? ? ? // 開啟深度偵聽
? ? ? ? ? ? ? ? ? ? deep:true,
? ? ? ? ? ? ? ? ? ? // 頁面加載完成時(shí),先運(yùn)行一次(注意這種情況下 oval是undefind)
? ? ? ? ? ? ? ? ? ? immediate:true,
? ? ? ? ? ? ? ? ? ? // 定義監(jiān)視函數(shù)
? ? ? ? ? ? ? ? ? ? handler(nval,oval){
? ? ? ? ? ? ? ? ? ? ? ? // 開啟深度監(jiān)聽后舊值就沒有意義了
? ? ? ? ? ? ? ? ? ? ? ? // 對(duì)象的屬性值已經(jīng)改了援雇,就沒有舊的屬性值
? ? ? ? ? ? ? ? ? ? ? ? console.log(nval,oval);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },