好看的網(wǎng)頁(yè)千篇一律，有趣的代碼萬(wàn)里挑一署隘。
今天一起學(xué)習(xí)：計(jì)算屬性&偵聽(tīng)器&過(guò)濾器
1. 綁定樣式
<div id="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>背景色：<input type="text" v-model="bgc"></p>
? ? ? ? <p>字體色：<input type="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>
2. 計(jì)算屬性
?new Vue({
? ? ? ? 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
? ? ? ? ? ? }
? ? ? ? },
? ? })
?new Vue({
? ? ? ? el:'#app',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? firstName:'王',
? ? ? ? ? ? ? ? lastName:'瑞',
? ? ? ? ? ? ? ? students:[
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? name:'張三',
? ? ? ? ? ? ? ? ? ? ? ? sex:'男',
? ? ? ? ? ? ? ? ? ? ? ? age:12
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? name:'李四',
? ? ? ? ? ? ? ? ? ? ? ? sex:'女',
? ? ? ? ? ? ? ? ? ? ? ? age:13
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? name:'王五',
? ? ? ? ? ? ? ? ? ? ? ? sex:'男',
? ? ? ? ? ? ? ? ? ? ? ? age:15
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 定義一個(gè)方法，返回姓名
? ? ? ? ? ? getName(){
? ? ? ? ? ? ? ? return this.firstName+'.'+this.lastName
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // 計(jì)算屬性腹鹉，計(jì)算屬性本質(zhì)上其實(shí)是方法
? ? ? ? computed:{
? ? ? ? ? ? // 在這里藏畅，我們定義的是方法，只不過(guò)這方法在模板中种蘸，可以當(dāng)做屬性來(lái)使用
? ? ? ? ? ? fullName(){
? ? ? ? ? ? ? ? return this.firstName+'.'+this.lastName
? ? ? ? ? ? },
? ? ? ? ? ? // 計(jì)算屬性的簡(jiǎn)單寫(xiě)法墓赴，就是定義一個(gè)方法，由該方法返回出去一份結(jié)果航瞭，所有它是只讀的诫硕。
? ? ? ? ? ? // 如果要修改計(jì)算屬性的值，就要使用完整的寫(xiě)法
? ? ? ? ? ? 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ì)算學(xué)生的平均年齡
? ? ? ? ? ? avgAge(){
? ? ? ? ? ? ? ? return (this.students.reduce((c,s)=>{
? ? ? ? ? ? ? ? ? ? return c+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è)容器 -->
<div id="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}} <input type="text" :value="goods2.price | toRMB"></h4>
? ? <h4>價(jià)格：{{goods2.price | toUS}} <input type="text" :value="goods2.price | toUS"></h4>
</div>
<div>=================================================</div>
<!-- 第二個(gè)容器 -->
<div id="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){
? ? return val.split('').reverse().join('')
})
// 該Vue實(shí)例操作第一個(gè)容器
new Vue({
? ? 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è)容器
new Vue({
? ? el:'#app2',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 商品一
? ? ? ? ? ? goods1:{
? ? ? ? ? ? ? ? name:'娃哈哈奶茶',
? ? ? ? ? ? ? ? price:25
? ? ? ? ? ? },
? ? ? ? ? ? message:'歡迎光臨本店亲茅，所有商品一律8折'
? ? ? ? }
? ? },
})
