一、绑定样式
1.:class绑定样式时，对象的属性名是类选择器名称，属性值返回true，表示添加该选择器

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

2.:style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值

<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习Vue
            <p>背景色：<input type="text" v-model="bgc"></p>
            <p>文本色：<input type="text" v-model="fc"></p>
        </div>

二、计算属性
1.计算属性的优势是：有缓存，当页面数据发生变化时，所有的方法都要重新执行，
当计算属性用到的数据发生变化时，计算属性才会重新执行。

<p>方法返回姓名：<input type="text" :value="fullName2()"></p>
        <p>计算属性返回姓名：<input type="text" :value="fullName"></p>

2.用于定义计算属性

computed: {
                totalPrice() {
                    console.log('我在计算总价格');
                    let sum = 0
                    this.goodses.forEach(r => {
                        sum += r.price
                    })
                    return sum
                },

3.在这里面定义的是方法，计算属性默认情况下只能读，不能改

 fullName() {
                    console.log('我是计算属性');
                    return this.firstName + '.' + this.lastName
                }

4.定义完整结构的计算属性

fullName:{
                    //get方法，用于返回计算属性的值
                    get(){
                        return this.firstName+'.'+this.lastName
                    },
                    //set方法，用于修改计算属性的值
                    set(val){
                        let arr = val.split('.')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }

三、侦听器|监听器
1.数据侦听器

 watch:{
                //根据属性的名称，定义一个方法，用于侦听该属性的变化
                //这个方法，可以传两个参数，第一个参数是最新值，第二个参数是旧值
                name(nval,oval){
                    //比例：当name属性值发生变化时，重新发送ajax请求获取新的数据
                    console.log(nval,oval);
                },
                /* age(nval,oval){
                    console.log(nval,oval);
                }, */
                /* student(nval,oval){
                    console.log(nval,oval);
                } */
// 侦听对象，需要开启深度监视
                student:{
                    //开启深度监视
                    deep:true,
                    //页面加载完成时，先运行一次（注意：这种情况下，旧值是undefined）
                    immediate:true,
                    //定义监视的函数
                    handler(nval,oval){
                        // 开启深度监视后，旧值已经没有意义，因为对象是引用类型，
                        // 对象的属性值已经改了，就没有旧的属性值。
                        console.log(nval,oval);
                    }
                }
            },

2.计算属性，也有监视的能力

computed:{
                MyAge(){
                    // 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
                    // 只是计算属性必须要在模板中使用
                    console.log(this.age);
                    return this.age
                }
            }

四、过滤器
1.通过管道符| 调用过滤器，其实就是调用那个方法，将值传进去，再返回新的值

<p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
            <input type="text" :value="goods.price | toFixed2">
        </p>

2.过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序

<p>商品价格(美元)：{{goods.price | toFixed2 | toUS}}</p>

3.定义方法，过滤商品的价格

methods: {
                toFixed2(val){
                    return val.toFixed(2)
                }
            },

4.定义一个计算属性

 computed:{
                myGoods(){
                    let goods = {
                        name:this.goods.name,
                        price:this.goods.price.toFixed(2)
                    }
                    return goods
                }
            },

5.定义过滤器

filters:{
                // 过滤在模板中通过管道符 | 的方式来调用 
                toFixed2(val){
                    return val.toFixed(2)
                },
                //返回人民币数据
                toRMB(val){
                    return '￥'+ val
                },
                //返回美元数据
                toUS(val){
                    return '$'+ (val/6.5).toFixed(2)
                }
            }