1.綁定樣式
<div id="app">
<button @click="bg_b=true">顯示藍(lán)色背景</button>
<button @click="c_w=true">顯示白色字體</button>
<div :class="{bg_b:bg_b,c_w:c_w}">好好學(xué)習(xí)Vue</div>
<button @click="arr.push('bg_p')">顯示粉色背景</button>
<button @click="arr.push('c_g')">顯示綠色字體</button>
<div :class="arr">好好學(xué)習(xí)Vue</div>
<div :class="bg_b?'bg_b':''">好好學(xué)習(xí)Vue</div>
<div :class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好學(xué)習(xí)Vue</div>
<p>背景色：<input type="text" v-model="bgc"></p>
<p>字體色：<input type="text" v-model="c"></p>
<div :style="{backgroundColor:bgc,color:c}">好好學(xué)習(xí)Vue</div>
<ul>
<li @click="activeIndex=index" v-for="(item,index) in list" :key="index" :class="{active:activeIndex===index}">{{item}}</li>
</ul>
</div>
2.計(jì)算屬性
計(jì)算屬性的優(yōu)勢(shì)：有緩存蔑赘，當(dāng)頁(yè)面數(shù)據(jù)發(fā)生變化時(shí)押袍，所有的方法都要重新執(zhí)行
當(dāng)計(jì)算屬性用到的數(shù)據(jù)發(fā)生變化時(shí)侧巨，計(jì)算屬性才會(huì)重新執(zhí)行
計(jì)算屬性，計(jì)算屬性本質(zhì)上其實(shí)是方法
computed:{
在這里，我們定義的是方法，只不過這方法在模板中适掰，可以當(dāng)做屬性來(lái)使用
******(){
},
計(jì)算屬性的簡(jiǎn)單寫法颂碧，就是定義一個(gè)方法，由該方法返回出去一份結(jié)果类浪，所有它是只讀的载城。
如果要修改計(jì)算屬性的值，就要使用完整的寫法
*****:{
// get方法戚宦，返回計(jì)算屬性的結(jié)果
get(){
},
// set方法个曙，修改計(jì)算屬性的結(jié)果，該方法接收一個(gè)參數(shù)是最新的值
set(val){
},
3.監(jiān)視器
watch: {
根據(jù)屬性的名稱受楼，定義一個(gè)方法垦搬，用于偵聽該屬性的變化
這個(gè)方法會(huì)傳兩個(gè)參數(shù)，第一個(gè)是最新值艳汽，第二個(gè)是舊值
**(nval, oavl) {
比如當(dāng)屬性發(fā)生變化時(shí)猴贰，重新發(fā)生ajax請(qǐng)求獲取新的數(shù)據(jù)
console.log(nval, oavl);
},
****() {
console.log(nval, oavl);
}
偵聽對(duì)象：需要開啟深度監(jiān)視
student: {
開啟深度監(jiān)視
deep: true,
頁(yè)面加載完成時(shí)，先運(yùn)行一次（這種情況下河狐，舊值時(shí)undefined）
immediate:true,
定義監(jiān)視的函數(shù)
handler(nval, oavl) {
開啟深度監(jiān)視后米绕，舊值已經(jīng)沒有意義，因?yàn)閷?duì)象是引用類型馋艺，
對(duì)象的屬性值已經(jīng)改了栅干，就沒有舊的屬性值
console.log(nval, oavl);
}
}
},
計(jì)算屬性，也有監(jiān)視能力
computed:{
//當(dāng)計(jì)算屬性用到的數(shù)據(jù)發(fā)生變化時(shí)捐祠，會(huì)重新執(zhí)行計(jì)算屬性
//只是計(jì)算屬性必須要在模板中使用
myAge(){
console.log(this.age);
return this.age
}
}
})
4.過濾器
定義過濾器
filters: {
過濾器通關(guān)管道符 | 的方式調(diào)用
toFixed2(val) {
return val.toFixed(2)
},
返回人民幣數(shù)據(jù)
toRMB(val) {
return '￥' + val
},
toUS(val) {
return '$' + (val / 6.5).toFixed(2)
}
}
})
通過管道符 | 調(diào)用過濾器 其實(shí)就是調(diào)用那個(gè)方法碱鳞，把值傳進(jìn)去，再返回新的值
<p>商品價(jià)格(人民幣):{{goods.price | toFixed2 | toRMB}}
過濾器可以鏈?zhǔn)秸{(diào)用踱蛀，就是之前已經(jīng)過濾完成的結(jié)果窿给，繼續(xù)傳給下一個(gè)過濾器，注意順序
<p>商品價(jià)格(美元):{{goods.price | toFixed2 | toUS}}
引入外部js率拒，里面定義的是全局過濾器
<script src="./filter/index.js"></script>
定義全局過濾器
如果局部過濾器和全局過濾器沖突崩泡，局部過濾器優(yōu)先級(jí)更高
Vue.filter('toFixed2', function(val){
return val.toFixed(2)
})
