1st.綁定樣式
? ??:class="{active:activeIndex===index}"
對(duì)象里面屬性名是class類選擇器名暇屋，屬性值是布爾值厂汗，當(dāng)布爾值是true時(shí)綁定前面的class
????:class="[activeIndex1===index?'active':''",activeIndex2===index?'active':''",activeIndex3===index? 'active':''",]"
綁定樣式還可以寫數(shù)組咆蒿，數(shù)組里用三元表達(dá)式表示需要綁定的class類選擇器名
:class="activeIndex===index?'active':''""
當(dāng)只有一個(gè)class類選擇器需要綁定時(shí)，三元表達(dá)式也可以直接寫
? ??:style="{backgroundColor:bc,color:fc}"
綁定行內(nèi)樣式時(shí)壕吹，屬性名是樣式類型浊闪，屬性值可以用data里面聲明的變量來表示
2nd.計(jì)算屬性
? ??當(dāng)頁(yè)面中綁定的數(shù)據(jù)發(fā)生變化時(shí)，因?yàn)椴淮_定改變的數(shù)據(jù)概荷，所以綁定數(shù)據(jù)的所有方法都會(huì)執(zhí)行一遍秕岛，而計(jì)算屬性因?yàn)橛芯彺妫灾挥邪l(fā)生改變的那個(gè)計(jì)算熟悉會(huì)執(zhí)行误证。
計(jì)算屬性聲明：
//?計(jì)算屬性继薛，計(jì)算屬性本質(zhì)上其實(shí)是方法
????computed:{
????????//?在這里，我們定義的是方法雷厂，只不過這方法在模板中惋增，可以當(dāng)做屬性來使用
????????fullName(){
????????????return?this.firstName+'.'+this.lastName
????????},
????????//?計(jì)算屬性的簡(jiǎn)單寫法，就是定義一個(gè)方法改鲫，由該方法返回出去一份結(jié)果诈皿，所有它是只讀的。
????????//?如果要修改計(jì)算屬性的值像棘，就要使用完整的寫法
????????fullName2:{
????????????//?get方法稽亏，返回計(jì)算屬性的結(jié)果
????????????get(){
????????????????return?this.firstName+'.'+this.lastName
????????????},
????????????//?set方法，修改計(jì)算屬性的結(jié)果缕题，該方法接收一個(gè)參數(shù)是最新的值
????????????set(val){
????????????????if(val.indexOf('.')!==0){
????????????????????let?arr?=?val.split('.')
????????????????????this.firstName?=?arr[0]
????????????????????this.lastName?=?arr[1]
????????????????}
????????????}
????????},
使用計(jì)算屬性：
<!-- 這里調(diào)用的是計(jì)算屬性截歉，計(jì)算屬性本質(zhì)上是方法，在模板中當(dāng)前屬性去使用烟零。 -->
<p>姓名：{{fullName}}</p>
3rd.數(shù)據(jù)偵聽器
要偵聽哪個(gè)屬性瘪松，就以那個(gè)屬性的名稱為方法名，定義一個(gè)方法,
當(dāng)屬性的值發(fā)生變化時(shí)锨阿，該方法就會(huì)執(zhí)行宵睦。
watch:{
????//?該方法，有兩個(gè)參數(shù)墅诡，第一個(gè)參數(shù)是新值壳嚎，第二參數(shù)是舊值
????name(nval,oval){
????????console.log('name屬性值發(fā)生變化了',nval,oval);
????},
}
如果要實(shí)現(xiàn)深度偵聽對(duì)象的變化，就需要使用完整的寫法末早，定義一個(gè)對(duì)象
在對(duì)象中烟馅，通過deep屬性設(shè)置深度監(jiān)視
?immediate?設(shè)置監(jiān)視器默認(rèn)執(zhí)行一次
//?偵聽emp對(duì)象是否發(fā)生了變化
emp:{
????//?深度監(jiān)視
????deep:true,
????//?設(shè)置監(jiān)視器，默認(rèn)執(zhí)行一次
????immediate:true,
????//?通過handler定義監(jiān)視器的方法
????handler(nval,oval){
????????console.log('員工信息發(fā)生變化了',nval,oval);
????}
}
4rd. 過濾器
定義過濾器有兩種方式：局部過濾器然磷，全局過濾器
局部過濾器郑趁，只是當(dāng)前Vue實(shí)例可以訪問
全局過濾器，所有的Vue實(shí)例都可以訪問
定義過濾器
?局部過濾器姿搜，里面定義的過濾器只是當(dāng)前Vue實(shí)例可以訪問寡润，優(yōu)先使用局部過濾器
filters:{
? ? //?每個(gè)過濾器其實(shí)缺脉，也是一個(gè)方法，該方法接收一個(gè)參數(shù)悦穿。
????//?對(duì)參數(shù)進(jìn)行過濾，然后重新返回业踢。
????toRMB(val){
???????????return?'￥'+val.toFixed(2)
?????},
?????toUS(val){
????????return?'$'+(val/6.4634).toFixed(2)
?????}
?}?
全局過濾器栗柒，所有的Vue實(shí)例都可以訪問
Vue.filter('toRMB',?function(val){
????return?'￥'+val.toFixed(2)
})
Vue.filter('toUS',?function(val){
????return?'$'+(val/6.4634).toFixed(2)
})
Vue.filter('strReverse',?function(val){
????return?val.split('').reverse().join('')
})
使用過濾器
過濾器只能在插值表達(dá)式?和??v-bind表達(dá)式中使用。通過“管道符”?|?指定使用具體的過濾器知举。原理就是將“管道符”左邊的值傳給“管道符”右邊的方法去處理瞬沦，并返回處理過后的結(jié)果。
????<h4>價(jià)格：{{goods2.price?|?toRMB}}?<input?type="text"?:value="goods2.price?|?toRMB"></h4>
