一、綁定樣式
1、: class綁定類選擇器
（1）通過對象綁定樣式
① 綁定單個(gè)樣式

<div id="app">
        <ul class="city">
            <li :class="{active:index===activeIndex}" v-for="(item,index) in citys" ::key="index" @click="activeIndex=index">{{item}}</li>
        </ul>
</div>

  <script>
        new Vue({
            el:'#app',
            data: {
                // 高亮下標(biāo)
                activeIndex:1,
                // 城市數(shù)組
                citys:['北京','南京','天津','東京'],     
            },
        })
   </script>

② 綁定多個(gè)樣式
:class綁定樣式時(shí)，對象的屬性名是類選擇器的名稱，如果屬性值返回true，表示添加該選擇器

<div id="app">
        <button @click="bgColor=true">添加背景顏色</button>
        <button @click="fontColor=true">添加文本顏色</button>
        <button @click="border=true">添加容器邊框</button>
        <!-- bgColor  前者為選擇器樣式名，后者為數(shù)據(jù)屬性名 -->
        <div class="box1" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">好好學(xué)習(xí)vue</div>
</div>

   <script>
        new Vue({
            el:'#app',
            data: {
                // 是否添加背景顏色
                bgColor:false,
                // 是否添加文本色
                fontColor:false,
               // 是否顯示邊框
                border:false,
            },
        })
    </script>

（2）通過三元表達(dá)式綁定樣式
綁定的三元表達(dá)式條件為true時(shí)，添加選擇器；條件為false則不添
加。
① 綁定單個(gè)樣式 （直接添加）

<div id="app">
      <div class="box1" :class="bgColor?'bgColor':''">好好學(xué)習(xí)vue</div>
</div>

② 綁定多個(gè)樣式（通過數(shù)組綁定添加）

<div id="app">
      <div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好學(xué)習(xí)vue</div>
</div>

2、：style綁定內(nèi)聯(lián)樣式
:style 綁定樣式時(shí)，通常也是綁定一個(gè)對象，對象的屬性名稱是css樣式的名稱（要使用小駝峰命名法），屬性值是具體的樣式值

<div id="app">
      <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>
</div>

  <script>
        new Vue({
            el:'#app',
            data: {
                // 定義背景顏色
                bgc:'orangered',
                // 定義文本顏色
                fc:'white',
            },
        })
    </script>

效果：改變輸入框的值，可以改變背景色和文本顏色

image.png

二、計(jì)算屬性
1、普通方法

   <div id="app">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名：<input type="text" v-model="lastName"></p>
        <p>地址：<input type="text" v-model="address"></p>
        <p>普通方法返回姓名：<input type="text" :value="fullName()"></p>
    </div>

 <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#app',
            data: {
                firstName: '張',
                lastName: '杰',
                address:'成都',
            methods: {
                fullName(){
                    return this.firstName + '.' + this.lastName
                },
   </script>

2、計(jì)算屬性方法
計(jì)算屬性的優(yōu)勢是：有緩存，當(dāng)頁面數(shù)據(jù)發(fā)生變化時(shí)，所有的方法都要重新執(zhí)行
當(dāng)計(jì)算屬性用到的數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性才會(huì)重新執(zhí)行

    <div id="app">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名：<input type="text" v-model="lastName"></p>
        <p>地址：<input type="text" v-model="address"></p>
        <p>計(jì)算屬性返回姓名：<input type="text" :value="fullName2"></p>
    </div>

注意：計(jì)算屬性在默認(rèn)情況下只能讀，不能改

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#app',
            data: {
                firstName: '張',
                lastName: '杰',
                address:'成都',
            // 用于定義計(jì)算屬性
            computed: {
                // 在這里面定義的是方法，計(jì)算屬性在默認(rèn)情況下只能讀，不能改
                fullName2(){
                    return this.firstName + '.' + this.lastName
                },
            }
        })
    </script>

如果需要修改計(jì)算屬性的值，需要定義完整結(jié)構(gòu)的計(jì)算屬性，并且使用v-model綁定計(jì)算屬性。用法如下所示：

 <div id="app">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名：<input type="text" v-model="lastName"></p>
        <p>地址：<input type="text" v-model="address"></p>
        <p>計(jì)算屬性返回姓名：<input type="text" :value="fullName2"></p>
 </div>

   <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#app',
            data: {
                firstName: '張',
                lastName: '杰',
                address:'成都',
            },
            // 用于定義計(jì)算屬性
            computed: {
                // 定義完整結(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]
                    }
                }
            },
        })
    </script>

三、數(shù)據(jù)偵聽器|監(jiān)聽器 watch
1、監(jiān)聽數(shù)據(jù)
根據(jù)屬性的名稱定義一個(gè)方法（方法名和屬性名相同），用于偵聽該屬性的變化。
定義的監(jiān)聽屬性的方法，可以傳兩個(gè)參數(shù)，第一個(gè)是最新值，第二個(gè)是舊值

<div id="app">
        <p>姓名：<input type="text" v-model="name"></p>
        <p>年齡：<input type="text" v-model="age"></p>
    </div>

<script>
    new Vue({
            el: '#app',
            data: {
                name: '張三',
                age: 20,
            },
            watch: {
                name(nval, oval) {
                    // 比如：當(dāng)name屬性值發(fā)生變化時(shí)，重新發(fā)送ajax請求獲取新的數(shù)據(jù)
                    console.log(nval, oval);
                },
                age(nval, oval) {
                    // 比如：當(dāng)age屬性值發(fā)生變化時(shí)，重新發(fā)送ajax請求獲取新的數(shù)據(jù)
                    console.log(nval, oval);
                }
            }
      })
</script>

2、監(jiān)聽對象
如果要實(shí)現(xiàn)深度偵聽對象的變化（也就是對象具體屬性的變化），就需要使用完整的寫法，定義一個(gè)對象。
deep屬性：在對象中，通過deep屬性設(shè)置深度監(jiān)視。
immediate屬性：如果希望頁面加載完成時(shí)，先運(yùn)行一次監(jiān)視器（注意：這種情況下，舊值是undefined），需要設(shè)置immediate:true。
handler：通過handler定義監(jiān)視器的方法。
注意：開啟深度監(jiān)視后，舊值已經(jīng)沒有意義。因?yàn)閷ο笫且妙愋?，對象的屬性值已?jīng)改了，就沒有舊的屬性值。

  <div id="app">
        <h2>學(xué)生信息</h2>
        <button @click="resetStudent">修改學(xué)生信息</button>
        <p>姓名：<input v-model="student.name"></p>
        <p>年齡：<input v-model="student.age"></p>
        <p>性別：<input v-model="student.sex"></p>
  </div>

<script>
        Vue.config.productionTip = false
        new Vue({
            el: '#app',
            data: {
                student: {
                    name: '李四',
                    age: 20,
                    sex: '女'
                }
            },
            methods: {
                resetStudent() {
                    this.student = {
                        name: '王五',
                        age: 25,
                        sex: '男'
                    }
                }
            },
            // 數(shù)據(jù)偵聽器
            watch: {
                //  偵聽對象，需要開啟深度偵聽
                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);
                    }
                }
            }
        })

    </script>

3、通過計(jì)算屬性進(jìn)行監(jiān)聽
當(dāng)前計(jì)算機(jī)屬性里面用到的數(shù)據(jù)發(fā)生變動(dòng)時(shí)，會(huì)重新執(zhí)行計(jì)算屬性。
只是計(jì)算機(jī)屬性必須要在模板中使用

 <div id="app">
        <p>年齡：<input type="text" v-model="age">{{MyAge}}</p>
  </div>

<script>
        new Vue({
            el: '#app',
            data: {
                age: 20,
            },
            // 計(jì)算屬性，也有監(jiān)視的能力
            computed: {
                MyAge() {
                    // 當(dāng)前計(jì)算機(jī)屬性里面用到的數(shù)據(jù)發(fā)生變動(dòng)時(shí)，會(huì)重新執(zhí)行計(jì)算屬性
                    // 只是計(jì)算機(jī)屬性必須要在模板中使用
                    console.log(this.age);
                    return this.age
                }
            }
        })
</script>

四、過濾器
1、普通方法

<div id="app">
        <p>商品名稱：{{goods.name}}</p>
        <p>商品價(jià)格：{{toFixed2(goods.price)}}</p>
    </div>

<script>
        new Vue({
            el:'#app',
            data:{
                goods:{
                    name:'小米手機(jī)',
                    price:1999.00
                }
            },
            // 定義方法，過濾商品的價(jià)格
            methods: {
                toFixed2(val){
                    return val.toFixed(2)
                }
            },
    </script>

2、通過計(jì)算屬性備份原始數(shù)據(jù)，再返回

<div id="app">
        <p>商品名稱：{{goods.name}}</p>
        <p>商品價(jià)格：{{myGoods.price}}</p>
    </div>

<script>
        new Vue({
            el:'#app',
            data:{
                goods:{
                    name:'小米手機(jī)',
                    price:1999.00
                }
            },
             // 定義一個(gè)計(jì)算屬性
            computed:{
                myGoods(){
                    let goods = {
                        name:this.goods.name,
                        price:this.goods.price.toFixed(2)
                    }
                    return goods
                }
            },
    </script>

3、過濾器
通過管道符 | 調(diào)用過濾器,原理就是將“管道符”左邊的值傳給“管道符”右邊的方法去處理，并返回處理過后的結(jié)果。
過濾器可以鏈?zhǔn)秸{(diào)用，就是之前已經(jīng)過濾完成的結(jié)果，繼續(xù)傳給下一個(gè)過濾器，注意順序。
定義過濾器有兩種方式：局部過濾器，全局過濾器。當(dāng)全局過濾器和局部過濾器沖突時(shí)，優(yōu)先級(jí)更高的是局部過濾器。
1、局部過濾器
局部過濾器（Vue實(shí)例內(nèi)部定義的過濾器），只有當(dāng)前Vue實(shí)例可以訪問。在filters中定義過濾器。

    <div id="app">
        <p>商品名稱：{{goods.name}}</p>
        <p>商品價(jià)格：{{goods.price | toFixed2}}</p>
        <!-- 通過管道符| 調(diào)用過濾器，其實(shí)就是調(diào)用那個(gè)方法，將值傳進(jìn)去，再返回新的值 -->
        <p>商品價(jià)格(人民幣)：{{goods.price | toFixed2 | toRMB}}
            <input type="text" :value="goods.price | toFixed2">
        </p>
        <!-- 過濾器可以鏈?zhǔn)秸{(diào)用，就是之前已經(jīng)過濾完成的結(jié)果，繼續(xù)傳給下一個(gè)過濾器，注意順序 -->
        <p>商品價(jià)格(美元)：{{goods.price | toFixed2 | toUS}}</p>
    </div>

<script>
                new Vue({
            el:'#app',
            data:{
                goods:{
                    name:'小米手機(jī)',
                    price:1999.22222
                }
            },
            // 定義過濾器
            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)
                }
            }
        })
    </script>

2、全局過濾器
在創(chuàng)建 Vue 實(shí)例之前定義的全局過濾器，所有的Vue實(shí)例都可以訪問。

    <!-- app 和 app2容器都可以使用全局過濾器toFixed2、toRMB -->
    <div id="app">
        <p>商品名稱：{{goods.name}}</p>
        <p>商品價(jià)格：{{goods.price | toFixed2 | toRMB}}</p>
    </div>
    <div id="app2">
        <p>商品名稱：{{goods.name}}</p>
        <p>商品價(jià)格：{{goods.price | toFixed2 | toRMB}}</p>
    </div>

   Vue.filter("toFixed2", function (val) {
      return val.toFixed(2);
   });
   Vue.filter('toRMB', function(val){
      return '￥'+ val
   })
   new Vue({
       el:'#app',
       data:{
           goods:{
               name:'小米手機(jī)',
               price:1999.22222
           }
       }
   })
   new Vue({
       el:'#app2',
       data:{
           goods:{
               name:'華為手機(jī)',
               price:2999.33333
           }
       }
   })