一、 :class樣式的綁定
屬性名是類(lèi)選擇器的名稱(chēng)，屬性值是true/false走搁，為真顯示對(duì)應(yīng)樣式独柑，為假無(wú)。
兩個(gè)方法效果同等私植，使用對(duì)象的方法添加更顯優(yōu)雅忌栅，看個(gè)人習(xí)慣！
1. :class樣式綁定對(duì)象寫(xiě)法
<div class="box" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">
2. :class使用數(shù)組三元表達(dá)式添加樣式兵琳，可添加多個(gè)
<div class="box" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">
二狂秘、：style樣式的綁定
屬性名是指定樣式的屬性名，屬性值是通過(guò)變量去獲取的對(duì)應(yīng)的屬性值
<div class="box" :style="{backgroundColor:bgc,fontColor:ftc}">
小案例：
通過(guò):style和雙向綁定躯肌，根據(jù)用戶(hù)輸入的值者春，改變字體和背景的顏色
<div id="app">
<div class="box" :style="{backgroundColor:bgc,fontColor:ftc}">
<input type="text" v-model="bgc">
<input type="text" v-model="ftc">
</div>
new Vue({
el:'#app',
data:{
activeIndex:0,
bgc:'red',
ftc:'black'
}
})
三、計(jì)算屬性 computed
一般我們?cè)诓逯当磉_(dá)式和指令身上不要寫(xiě)過(guò)多的邏輯代碼清女，而是展示結(jié)果
<p>返回姓名：<input type="text" :value="firstName+'.'+lastName"></p>
解決這種情況有兩種方法
1.通過(guò)方法去做
和data同層級(jí)放置钱烟，它有個(gè)特點(diǎn)是頁(yè)面數(shù)據(jù)只要有變動(dòng)它就會(huì)執(zhí)行一次。
methods:{
fullName2(){
console.log('我是方法');
return this.firstName+'.'+this.lastName
}, }
2.計(jì)算屬性
（1）和data同層級(jí)放置嫡丙，在computed里面定義的是方法拴袭，在模板中當(dāng)屬性使用
（2）計(jì)算屬性的特點(diǎn)是有緩存，當(dāng)計(jì)算屬性用到的數(shù)據(jù)發(fā)生變化時(shí)曙博，計(jì)算屬性才會(huì)重新執(zhí)行
（3）計(jì)算屬性默認(rèn)只能讀拥刻，不能改
computed:{
fullName(){
console.log('我是計(jì)算屬性');
return this.firstName+'.'+this.lastName
}
}
3.完整結(jié)構(gòu)的計(jì)算屬性
使用v-model綁定計(jì)算屬性
<p>計(jì)算屬性返回姓名：<input type="text" v-model="fullName"></p>
get方法用于返回計(jì)算屬性的值
set方法用于修改計(jì)算屬性的值
computed:{
fullName:{
get(){
return this.firstName+'.'+this.lastName
},
set(val){
console.log(val);
let arr=val.split('.')
this.firstName=arr[0]
this.lastName=arr[1]
} } },
總結(jié)：當(dāng)一個(gè)屬性既可以用計(jì)算屬性也可以用方法做時(shí)扁位，優(yōu)先選擇計(jì)算屬性
四监婶、Vue偵聽(tīng)器watch
1.數(shù)據(jù)偵聽(tīng)器，當(dāng)發(fā)現(xiàn)監(jiān)聽(tīng)的數(shù)據(jù)發(fā)生變化時(shí)钞楼，執(zhí)行該該函數(shù)惠窄。函數(shù)名是要監(jiān)聽(tīng)屬性名
①和data同層級(jí)放置蒸眠，這個(gè)方法有兩個(gè)參數(shù)，第一參數(shù)是新值杆融，第二個(gè)參數(shù)是舊值
<p>姓名：<input type="text" v-model="name"></p>
<p>年齡：<input type="text" v-model="age"></p>
watch:{
name(nval,oval){
console.log(11);
},
age(nval,oval){
console.log(nval,oval);
}
2.開(kāi)啟深度監(jiān)視
（1）想要改變屬性的時(shí)候也能監(jiān)聽(tīng)到楞卡，就要開(kāi)始深度監(jiān)視deep:true。并且需要把以前的方法改成對(duì)象
（2）開(kāi)啟深度監(jiān)視后只能打印最新值脾歇，因?yàn)橹皇侵匦略O(shè)置了這個(gè)對(duì)象蒋腮，并沒(méi)有換對(duì)象，對(duì)象是引用類(lèi)型藕各。
<button @click="resetStundent">修改學(xué)生對(duì)象</button>
methods: {
resetStundent(){
this.student={
name:'七七',
age:19,
sex:'男'
} }},
watch:{
student:{
deep:true, //代表開(kāi)啟深度監(jiān)視
handler(navl,oval){
console.log(nval,oval);
}}}
錯(cuò)誤示范：
只是這樣的話(huà)監(jiān)聽(tīng)的是這個(gè)對(duì)象徽惋，里面的屬性雖然發(fā)生變化但還是這個(gè)人，所以修改里面的屬性不會(huì)觸發(fā)這個(gè)方法
watch:{
student(nval,oval){
console.log(nval,oval);
}
3.計(jì)算屬性也有監(jiān)聽(tīng)的能力
（1）當(dāng)前計(jì)算屬性里面用到數(shù)據(jù)發(fā)生變化時(shí)座韵，會(huì)重新執(zhí)行計(jì)算屬性
（2）計(jì)算屬性必須要在模板中使用
<p>姓名：<input type="text" v-model="name">{{myName}}</p>
computed:{
myName(){
console.log(this.name);
return this.name
} }
五险绘、過(guò)濾器filters
1.過(guò)濾器在模板中通過(guò)管道符 | 的方式來(lái)調(diào)用
（1）其實(shí)就是調(diào)用方法將值傳進(jìn)去踢京，再返回新的值，背后的原理和methods一樣.只不過(guò)看起來(lái)更優(yōu)雅一點(diǎn)
<p>商品價(jià)格(人民幣)：{{goods.price | toFixed2 | toRMB }}</p>
<p>商品價(jià)格(美元)：{{goods.price | toUS }}</p>
filters:{
toFixed2(val){
return val.toFixed(2)
},
toRMB(val){
return '￥'+val
},
toUS(val){
return '$'+(val/6.5).toFixed(2)
}
}
2.全局過(guò)濾器
（1）通常全局過(guò)濾器都單獨(dú)放一個(gè)文件夾宦棺，在項(xiàng)目下新建filer文件->index.js
Vue.filter('toFixed2',function(val){
return val.toFixed(2)
})
（2）在需要的頁(yè)面引入即可使用
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="./filter/index.js"></script>
<script>
