Vue(五)

侦听器|监听器

数据侦听器

watch:{  

根据属性的名称,定义一个方法,用于侦听该属性的变化

这个方法,可以传两个参数,第一个参数是最新值,第二个参数是旧值

name(nval,oval){

                   比如:当name属性值发生变化时,重新发送ajax请求获取新的数据

                    console.log(nval,oval);

                },

侦听对象,需要开启深度监视

                student:{

                   开启深度监视

                    deep:true,

                    页面加载完成时,先运行一次(注意:这种情况下,旧值是undefined)

                    immediate:true,

                   定义监视的函数

                    handler(nval,oval){

                       开启深度监视后,旧值已经没有意义,因为对象是引用类型,

                       对象的属性值已经改了,就没有旧的属性值。

                        console.log(nval,oval);

                    }

                }

  }


计算属性,也有监视的能力

computed:{

                MyAge(){

                    当前计算机属性里面用到数据发生变化时,会重新执行计算属性

                    只是计算属性必须要在模板中使用

                    console.log(this.age);

                    return this.age

                }

            }


过滤器

 定义全局过滤器,如果局部过滤器和全局过滤器冲突了,优先级更高的是局部过滤器

Vue.filter("toFixed2", function (val) {

  return val.toFixed(2);

});


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

例:

商品价格(人民币):{{goods.price | toFixed2 | toRMB}}

           

       


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

例:

商品价格(美元):{{goods.price | toFixed2 | toUS}}


定义过滤器

例:filters:{

                // 过滤在模板中通过管道符 | 的方式来调用

                toFixed2(val){

                    return val.toFixed(2)

                },

                //返回人民币数据

                toRMB(val){

                    return '¥'+ val

                },

                //返回美元数据

                toUS(val){

                    return '$'+ (val/6.5).toFixed(2)

                }

            }

你可能感兴趣的:(Vue(五))