一、绑定样式

1、:class 绑定类选择器

（1）绑定对象

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

① 绑定单个样式

<style>
   .list li.active{
        background-color: tomato;
        color: white;
    }
</style>

<div id="app">
   <ul class="list">
       <!-- index===activeIndex判断结果为true时，添加active选择器 -->
       <li :class="{active:index===activeIndex}" v-for="(item, index) in citys" :key="index" @click="activeIndex=index">{{item}}</li>
   </ul>
</div>

   new Vue({
       el:"#app",
       data:{
           activeIndex:0,
       }
   })

② 绑定多个样式

        .bgColor{
            background-color: skyblue;
        }
        .textColor{
            color: white;
        }
        .borderColor{
            border: 2px sienna solid;
        }

<div id="app">
    <div>
        <button @click="bgColor=true">添加背景颜色</button>
        <button @click="textColor=true">添加文本颜色</button>
        <button @click="borderColor=true">添加边框</button>
        <!-- 绑定class,对象的属性名就是指定类的名称，属性值是true和false -->
        <div class="box1" :class="{bgColor:bgColor,textColor:textColor,borderColor:borderColor}">好好学习</div>
</div>

        new Vue({
            el:"#app",
            data:{
                //是否添加背景颜色
                bgColor:false,
                //是否添加文本颜色
                fontColor:false,
                //是否显示边框
                border:false,
            }
        })

（2）绑定表达式

绑定的三元表达式条件为true时，添加选择器；条件为false则不添加。

① 直接绑定一个表达式

<div id="app">
     <div class="box1" :class=" bgColor?'bgColor':'' ">好好学习</div>
</div>

② 通过数组绑定多个表达式

<div id="app">
     <div class="box1" :class="[bgColor?'bgColor':'',textColor?'textColor':'',borderColor?'borderColor':'']">好好学习</div>
</div>

2、:style是绑定内联样式

:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名（要使用小驼峰命名法），属性值是具体的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>

        new Vue({
            el:'#app',
            data:{
                //定义背景颜色
                bgc:'orangered',
                //定义文本颜色
                fc:'white'
            }
        })

效果：改变输入框的值，可以改变背景色和文本颜色

二、计算属性

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="fullName2()"></p>
</div>

        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
                address: '成都',
            },
            methods: {
                fullName2() {
                    console.log('我是方法');
                    return this.firstName + '.' + this.lastName
                },
            },
        })

2、计算属性 computed

计算属性的优势是：有缓存。只有当计算属性用到的数据发生变化时，计算属性才会重新执行。计算属性本质上其实是方法，只不过这方法在模板中，可以当做属性来使用。

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

        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
                address: '成都',
            },
            //用于定义计算属性
            computed: {
                // 在这里面定义的是方法，计算属性默认情况下只能读，不能改
                fullName() {
                    console.log('我是计算属性');
                    return this.firstName + '.' + this.lastName
                }
            }
        })

注意：计算属性默认情况下只能读，不能改；如果需要修改计算属性的值，需要定义完整结构的计算属性，并且使用v-model绑定计算属性。用法如下所示：

<p>计算属性返回姓名：<input type="text" v-model="fullName"></p>

        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
                address: '成都',
            },
            //用于定义计算属性
            computed: {
                // 定义完整结构的计算属性
                fullName:{
                    //get方法，用于返回计算属性的值
                    get(){
                        return this.firstName+'.'+this.lastName
                    },
                    //set方法，用于修改计算属性的值
                    set(val){
                        let arr = val.split('.')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })

三、数据侦听器 watch

Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听器。也就是说，当vue实例数据发生变动，watch属性可以快速检测到改变的数据。

1、监听数据

要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法, 当属性的值发生变化时，该方法就会执行。该方法，有两个参数，第一个参数是最新值，第二参数是旧值。

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

 new Vue({
     el:'#app',
     data:{
         name:'张三'
     },
     //数据侦听器
     watch:{
         // 侦听name
         name(nval,oval){
             // 可以在侦听到name属性值发生变化时，进行一些操作。例如重新发送ajax请求获取新的数据
             console.log(nval,oval);
         }
     }
 })

2、监听对象

如果要实现深度侦听对象的变化（也就是对象具体属性的变化），就需要使用完整的写法，定义一个对象。
deep属性：在对象中，通过deep属性设置深度监视。
immediate属性：如果希望页面加载完成时，先运行一次监视器（注意：这种情况下，旧值是undefined），需要设置immediate:true。
handler：通过handler定义监视器的方法。

注意：开启深度监视后，旧值已经没有意义。因为对象是引用类型，对象的属性值已经改了，就没有旧的属性值。

    <div id="app">
        <button @click="resetStudent">修改学生对象</button>
        <p>姓名：<input v-model="student.name" ></p>
        <p>年龄：<input v-model="student.age" ></p>
        <p>性别：<input v-model="student.sex" ></p>
    </div>

  new Vue({
      el:'#app',
      data:{
          student:{
              name:'李四',
              age:20,
              sex:'女'
          }
      },
      methods: {
          resetStudent(){
              this.student = {
                  name:'王五',
                  age:22,
                  sex:'男'
              }
          }
      },
      //数据侦听器
      watch:{
          // 侦听对象，需要开启深度监视
          student:{
              // 开启深度监视
              deep:true,
              // 页面加载完成时，先运行一次
              immediate:true,
              //定义监视的函数
              handler(nval,oval){
                  console.log(nval,oval);
              }
          }
      }
  })

3、通过计算属性实现监听

当计算机属性里面用到的数据发生变化时，会重新执行计算属性。只是计算属性必须要在模板中使用（也就是说需要在容器中调用）。

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

  new Vue({
      el:'#app',
      data:{
          age:20
      }
      //计算属性，也有监视的能力
      computed:{
          MyAge(){
              // 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
              // 只是计算属性必须要在模板中使用
              console.log(this.age);
              return this.age
          }
      }
  })

四、过滤器

每个过滤器其实也是一个方法。该方法接收一个参数，对参数进行过滤，然后重新返回。过滤器只能在插值表达式 和 v-bind表达式中使用。通过管道符 | 指定使用具体的过滤器。原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。
过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序。
定义过滤器有两种方式：局部过滤器，全局过滤器。当全局过滤器和局部过滤器冲突时，优先级更高的是局部过滤器。

1、局部过滤器

局部过滤器（Vue实例内部定义的过滤器），只有当前Vue实例可以访问。在filters中定义过滤器。

    <div id="app">
        <p>商品名称：{{goods.name}}</p>
        <p>商品价格：{{goods.price | toFixed2}}</p>
        <!-- 通过管道符| 调用过滤器，其实就是调用那个方法，将值传进去，再返回新的值 -->
        <p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
            <input type="text" :value="goods.price | toFixed2">
        </p>
        <!-- 过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序 -->
        <p>商品价格(美元)：{{goods.price | toFixed2 | toUS}}</p>
    </div>

        new Vue({
            el:'#app',
            data:{
                goods:{
                    name:'小米手机',
                    price:1999.22222
                }
            },
            // 定义过滤器
            filters:{
                // 过滤在模板中通过管道符 | 的方式来调用 
                toFixed2(val){
                    return val.toFixed(2)
                },
                //返回人民币数据
                toRMB(val){
                    return '￥'+ val
                },
                //返回美元数据
                toUS(val){
                    return '$'+ (val/6.5).toFixed(2)
                }
            }
        })

2、全局过滤器

在创建 Vue 实例之前定义的全局过滤器，所有的Vue实例都可以访问。

    <!-- app 和 app2容器都可以使用全局过滤器toFixed2、toRMB -->
    <div id="app">
        <p>商品名称：{{goods.name}}</p>
        <p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
    </div>
    <div id="app2">
        <p>商品名称：{{goods.name}}</p>
        <p>商品价格：{{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:'小米手机',
               price:1999.22222
           }
       }
   })
   new Vue({
       el:'#app2',
       data:{
           goods:{
               name:'华为手机',
               price:2999.33333
           }
       }
   })