• vue教程(二)--过滤器和监视改动功能


    过滤器filter:

    1、将数据进行添油加醋的操作。

    2、过滤器分两种: 组件内的过滤器(组件内有效)、 全局过滤器

    组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回最终数据。 例如 filters:{transName:function(){reteurn ''}}

    全局过滤器: Vue.filter(过滤器名:过滤器函数fn);例如:Vue.filter('transName',function(arg....){return ''})

    3、过滤器是先注册再使用

    4、用法 {{变量|过滤器名(参数1,参数2......)}}

    监听watch(单个),cumputed(监听多个)

    1、用法watch(key属于data中声明的变量名,value是监视后的行为)

    watch:{

      myName:function(newValue,oldValue){

      }

    }

    注:如果watch监视复杂类型的数据 比如users:[{name:''abc}],  如果按上述监听,怎么监听失败,因为对于复杂类型的数据,watch监听的是对象的地址,而不是属性的值。所以需要

    深度监听。一般复杂类型 Object || array,用法如下:

    watch:{

         user:{

        deep:true,

        handler:function(newValue,oldValue){

        }

          }

    }

    2、cumputed(监听多个) 用法

    例如 要实现   a+b = {{result}}的例子,a、b分别代表的是data里面声明的变量,a任何一个的变化都会影响result的输出,这时可以使用cumputed,

    cumputed:{

      //监听result属性

      result:function(){

        //监视对象,凡是写在该方法内的所有this.变量,都会被监听执行该方法。

        return this.a+this.b;

      }

    }

    git上有开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址,QQ交流群

                                                                                                                                               ①群:699050440

                                                                                                                                               ②群:824313640

                                   

  • 相关阅读:
    CPP标准模板库 随笔
    C++ Concurrency In Action 一些重点
    标准模板库(STL)
    单链表常见操作
    android三大组件之Intent
    数组k平移三种方法(java)
    java中空字符串、null的区别
    java最大最小堆
    java学习笔记之基础知识
    笔试题集锦
  • 原文地址:https://www.cnblogs.com/fatpig-wf/p/11243918.html
Copyright © 2020-2023  润新知