一贞言、綁定樣式
1.:class綁定樣式時(shí)妄田，對象的屬性名是類選擇器名稱酱塔，屬性值返回true，表示添加該選擇器
<li :class="{active:index===activeIndex}" @click="activeIndex=index"
v-for="(item,index) in citys" :key="index">{{item}}</li>
2.:style綁定樣式時(shí)平项，對象的屬性名稱是css樣式的名稱（要使用小駝峰命名法）桥言，屬性值是具體的樣式值
<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好學(xué)習(xí)Vue
<p>背景色：<input type="text" v-model="bgc"></p>
<p>文本色：<input type="text" v-model="fc"></p>
</div>
二、計(jì)算屬性
1.計(jì)算屬性的優(yōu)勢是：有緩存葵礼，當(dāng)頁面數(shù)據(jù)發(fā)生變化時(shí)，所有的方法都要重新執(zhí)行并鸵，
當(dāng)計(jì)算屬性用到的數(shù)據(jù)發(fā)生變化時(shí)鸳粉，計(jì)算屬性才會重新執(zhí)行。
<p>方法返回姓名：<input type="text" :value="fullName2()"></p>
<p>計(jì)算屬性返回姓名：<input type="text" :value="fullName"></p>
2.用于定義計(jì)算屬性
computed: {
totalPrice() {
console.log('我在計(jì)算總價(jià)格');
let sum = 0
this.goodses.forEach(r => {
sum += r.price
})
return sum
},
3.在這里面定義的是方法园担，計(jì)算屬性默認(rèn)情況下只能讀届谈，不能改
fullName() {
console.log('我是計(jì)算屬性');
return this.firstName + '.' + this.lastName
}
4.定義完整結(jié)構(gòu)的計(jì)算屬性
fullName:{
//get方法，用于返回計(jì)算屬性的值
get(){
return this.firstName+'.'+this.lastName
},
//set方法弯汰，用于修改計(jì)算屬性的值
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
三艰山、偵聽器|監(jiān)聽器
1.數(shù)據(jù)偵聽器
watch:{
//根據(jù)屬性的名稱，定義一個(gè)方法咏闪，用于偵聽該屬性的變化
//這個(gè)方法曙搬，可以傳兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新值鸽嫂，第二個(gè)參數(shù)是舊值
name(nval,oval){
//比例：當(dāng)name屬性值發(fā)生變化時(shí)纵装，重新發(fā)送ajax請求獲取新的數(shù)據(jù)
console.log(nval,oval);
},
/* age(nval,oval){
console.log(nval,oval);
}, */
/* student(nval,oval){
console.log(nval,oval);
} */
// 偵聽對象，需要開啟深度監(jiān)視
student:{
//開啟深度監(jiān)視
deep:true,
//頁面加載完成時(shí)据某，先運(yùn)行一次（注意：這種情況下橡娄，舊值是undefined）
immediate:true,
//定義監(jiān)視的函數(shù)
handler(nval,oval){
// 開啟深度監(jiān)視后，舊值已經(jīng)沒有意義癣籽，因?yàn)閷ο笫且妙愋停? // 對象的屬性值已經(jīng)改了挽唉，就沒有舊的屬性值滤祖。
console.log(nval,oval);
}
}
},
2.計(jì)算屬性，也有監(jiān)視的能力
computed:{
MyAge(){
// 當(dāng)前計(jì)算機(jī)屬性里面用到數(shù)據(jù)發(fā)生變化時(shí)瓶籽，會重新執(zhí)行計(jì)算屬性
// 只是計(jì)算屬性必須要在模板中使用
console.log(this.age);
return this.age
}
}
四匠童、過濾器
1.通過管道符| 調(diào)用過濾器，其實(shí)就是調(diào)用那個(gè)方法棘劣，將值傳進(jìn)去俏让，再返回新的值
<p>商品價(jià)格(人民幣)：{{goods.price | toFixed2 | toRMB}}
<input type="text" :value="goods.price | toFixed2">
</p>
2.過濾器可以鏈?zhǔn)秸{(diào)用，就是之前已經(jīng)過濾完成的結(jié)果茬暇，繼續(xù)傳給下一個(gè)過濾器首昔，注意順序
<p>商品價(jià)格(美元)：{{goods.price | toFixed2 | toUS}}</p>
3.定義方法，過濾商品的價(jià)格
methods: {
toFixed2(val){
return val.toFixed(2)
}
},
4.定義一個(gè)計(jì)算屬性
computed:{
myGoods(){
let goods = {
name:this.goods.name,
price:this.goods.price.toFixed(2)
}
return goods
}
},
5.定義過濾器
filters:{
// 過濾在模板中通過管道符 | 的方式來調(diào)用
toFixed2(val){
return val.toFixed(2)
},
//返回人民幣數(shù)據(jù)
toRMB(val){
return '￥'+ val
},
//返回美元數(shù)據(jù)
toUS(val){
return '$'+ (val/6.5).toFixed(2)
}
}
