三、計(jì)算屬性&偵聽(tīng)器&過(guò)濾器
1. 綁定樣式
<divid="app"><button@click="bg_b=true">顯示藍(lán)色背景</button><button@click="c_w=true">顯示白色字體</button><!-- :class可以綁定一個(gè)對(duì)象，對(duì)象的屬性名是類(lèi)選擇器的名稱(chēng)，屬性值返回true，表示添加該選擇器。 --><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><!-- :class可以綁定字符串一個(gè)數(shù)組，數(shù)組中的每一個(gè)元素就是一個(gè)選擇器 --><div:class="arr">好好學(xué)習(xí)Vue</div><!-- :class可以直接綁定一個(gè)表示 --><div:class="bg_b?'bg_b':''">好好學(xué)習(xí)Vue</div><!-- :class也可以通過(guò)數(shù)組綁定多個(gè)表達(dá)式 --><div:class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好學(xué)習(xí)Vue</div><hr><p>背景色：<inputtype="text"v-model="bgc"></p><p>字體色：<inputtype="text"v-model="c"></p><!-- :class是綁定類(lèi)選擇器，:style是綁定內(nèi)聯(lián)樣式。
:style通常也是綁定一個(gè)對(duì)象，對(duì)象的屬性名是原生CSS的屬性名，但是要采用小駝峰命名規(guī)范。 --><div:style="{backgroundColor:bgc,color:c}">好好學(xué)習(xí)Vue</div><br><!-- 小練習(xí)：實(shí)現(xiàn)點(diǎn)誰(shuí)，誰(shuí)高亮 --><ul><li@click="activeIndex=index"v-for="(item,index) in list":key="index":class="{active:activeIndex===index}">{{item}}</li></ul></div>
newVue({el:'#app',data(){return{// 是否顯示藍(lán)色背景bg_b:false,// 是否顯示白色字體c_w:false,// 該數(shù)組中，用于存儲(chǔ)類(lèi)選擇器的名稱(chēng)arr:[],// 定義背景色bgc:'orange',// 定義字體顏色c:'red',list:['保時(shí)捷','瑪莎拉蒂','雷克薩斯','吉利'],// 定義一個(gè)高亮索引activeIndex:0}},})
2. 計(jì)算屬性
<divid="app"><p>姓：<inputtype="text"v-model="firstName"></p><p>名：<inputtype="text"v-model="lastName"></p><!-- 通常情況下，我們喜歡插值表達(dá)式里面，不要寫(xiě)過(guò)多的邏輯代碼，而是直接展示結(jié)果 --><p>姓名：{{firstName+'.'+lastName}}</p><!-- 插值表達(dá)式中可以調(diào)用方法，并顯示方法的返回結(jié)果 --><p>姓名：{{getName()}}</p><!-- 這里調(diào)用的是計(jì)算屬性，計(jì)算屬性本質(zhì)上是方法，在模板中當(dāng)前屬性去使用。 --><p>姓名：{{fullName}}</p><p>姓名：<inputtype="text"v-model="fullName2"></p><hr><ul><liv-for="(item,index) in students":key="index">{{item.name}}--{{item.sex}}--{{item.age}}</li><li>平均年齡是：{{avgAge}}</li></ul></div>
newVue({el:'#app',data(){return{firstName:'王',lastName:'瑞',students:[{name:'張三',sex:'男',age:12},{name:'李四',sex:'女',age:13},{name:'王五',sex:'男',age:15}]}},methods:{// 定義一個(gè)方法，返回姓名getName(){returnthis.firstName+'.'+this.lastName}},// 計(jì)算屬性，計(jì)算屬性本質(zhì)上其實(shí)是方法computed:{// 在這里，我們定義的是方法，只不過(guò)這方法在模板中，可以當(dāng)做屬性來(lái)使用fullName(){returnthis.firstName+'.'+this.lastName},// 計(jì)算屬性的簡(jiǎn)單寫(xiě)法，就是定義一個(gè)方法，由該方法返回出去一份結(jié)果，所有它是只讀的。// 如果要修改計(jì)算屬性的值，就要使用完整的寫(xiě)法fullName2:{// get方法，返回計(jì)算屬性的結(jié)果get(){returnthis.firstName+'.'+this.lastName},// set方法，修改計(jì)算屬性的結(jié)果，該方法接收一個(gè)參數(shù)是最新的值set(val){if(val.indexOf('.')!==0){letarr=val.split('.')this.firstName=arr[0]this.lastName=arr[1]}}},// 計(jì)算學(xué)生的平均年齡avgAge(){return(this.students.reduce((c,s)=>{returnc+s.age},0)/this.students.length).toFixed(2)}}})
3. 數(shù)據(jù)偵聽(tīng)器
<div id="app">?
<p>姓名：<input type="text" v-model="name"></p>
<p>年齡：<input type="text" v-model="age"></p>
<hr>
<p>員工姓名：<input type="text" v-model="emp.name"></p>
<p>員工年齡：<input type="text" v-model="emp.age"></p>
<p>員工汽車(chē)名稱(chēng)：<input type="text" v-model="emp.car.name"></p>
<p>員工汽車(chē)價(jià)格：<input type="text" v-model="emp.car.price"></p>
</div>
new Vue({
el:'#app',
data(){
return {
? ?name:'王瑞',
? ?age:20,
// 定義一個(gè)對(duì)象
? ? emp:{
? ? ? ?name:'張勇杰',
? ? ? ?age:20,
// 員工的汽車(chē)對(duì)象
? ? ? ? ? car:{
? ? ? ? ? ? ?name:'奔馳',
? ? ? ? ? ? ?price:'50W'
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? }
},
// 偵聽(tīng)器
watch:{
// 要偵聽(tīng)哪個(gè)屬性，就以那個(gè)屬性的名稱(chēng)為方法名，定義一個(gè)方法,
// 當(dāng)屬性的值發(fā)生變化時(shí)，該方法就會(huì)執(zhí)行。
// 該方法，有兩個(gè)參數(shù)，第一個(gè)參數(shù)是新值，第二參數(shù)是舊值
name(nval,oval){
console.log('name屬性值發(fā)生變化了',nval,oval);
},
// 偵聽(tīng)emp對(duì)象是否發(fā)生了變化
// 如果要實(shí)現(xiàn)深度偵聽(tīng)對(duì)象的變化，就需要使用完整的寫(xiě)法，定義一個(gè)對(duì)象
// 在對(duì)象中，通過(guò)deep屬性設(shè)置深度監(jiān)視
emp:{
// 深度監(jiān)視
?deep:true,
// 設(shè)置監(jiān)視器，默認(rèn)執(zhí)行一次
?immediate:true,
// 通過(guò)handler定義監(jiān)視器的方法
? ? handler(nval,oval){
? ? ? ?console.log('員工信息發(fā)生變化了',nval,oval);
? ? ? ? ?}
? ? ?}
?}
})
4. 過(guò)濾器
<!-- 第一個(gè)容器 --><divid="app"><h2>{{goods1.name}}</h2><h4>價(jià)格：{{rmb_price}}</h4><h4>價(jià)格：{{us_price}}</h4><h4>價(jià)格：{{goods1.price | toRMB}}</h4><h4>價(jià)格：{{goods1.price | toUS}}</h4><hr><h2>{{goods2.name}}</h2><!-- 過(guò)濾器只能在插值表達(dá)式 和? v-bind表達(dá)式中使用。通過(guò)“管道符” | 指定使用具體的過(guò)濾器。
原理就是將“管道符”左邊的值傳給“管道符”右邊的方法去處理，并返回處理過(guò)后的結(jié)果。 --><h4>價(jià)格：{{goods2.price | toRMB}}<inputtype="text":value="goods2.price | toRMB"></h4><h4>價(jià)格：{{goods2.price | toUS}}<inputtype="text":value="goods2.price | toUS"></h4></div><div>=================================================</div><!-- 第二個(gè)容器 --><divid="app2"><h2>{{goods1.name}}</h2><h4>價(jià)格：{{goods1.price | toRMB}}</h4><h4>價(jià)格：{{goods1.price | toUS}}</h4><h2>{{message}}</h2><h2>{{message | strReverse}}</h2></div>
// 定義過(guò)濾器有兩種方式：局部過(guò)濾器，全局過(guò)濾器// 局部過(guò)濾器，只是當(dāng)前Vue實(shí)例可以訪問(wèn)// 全局過(guò)濾器，所有的Vue實(shí)例都可以訪問(wèn)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){returnval.split('').reverse().join('')})// 該Vue實(shí)例操作第一個(gè)容器newVue({el:'#app',data(){return{// 商品一goods1:{name:'蘋(píng)果手機(jī)',price:8666,},// 商品二goods2:{name:'小米電視',price:8848}}},computed:{// 定義一個(gè)計(jì)算屬性，返回人民幣價(jià)格// 計(jì)算屬性一般用于針對(duì)性的計(jì)算，假設(shè)我們有很多數(shù)據(jù)要計(jì)算，就不太方便了。rmb_price(){return'￥'+this.goods1.price.toFixed(2)},// 定義一個(gè)計(jì)算屬性，返回美金價(jià)格us_price(){return'$'+(this.goods1.price/6.4634).toFixed(2)}},// 定義過(guò)濾器 (局部過(guò)濾器，里面定義的過(guò)濾器只是當(dāng)前Vue實(shí)例可以訪問(wèn))/* filters:{
? ? ? // 每個(gè)過(guò)濾器其實(shí)，也是一個(gè)方法，該方法接收一個(gè)參數(shù)。
? ? ? ? // 對(duì)參數(shù)進(jìn)行過(guò)濾，然后重新返回。
? ? ? ? toRMB(val){
? ? ? ? ? return '￥'+val.toFixed(2)
? ? ? ? },
? ? ? ? toUS(val){
? ? ? ? ? ? return '$'+(val/6.4634).toFixed(2)
? ? ? ? }
? ? } */})// 該Vue實(shí)例操作第二個(gè)容器newVue({el:'#app2',data(){return{// 商品一goods1:{name:'娃哈哈奶茶',price:25},message:'歡迎光臨本店，所有商品一律8折'}},})
