vue的简单使用5-过滤器的使用

vue过滤器可以格式化常用文本，vue过滤器只能在插值表达式{{}}和v-bind中使用

顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；

一、定义一个全局过滤语法：

vue.filter("过滤器名称"，函数)

定义一个Vue全局过滤器很简单，使用Vue的filter方法，第一个参数是过滤器的名称，第二个参数是处理函数，那如何使用过滤器呢 来个例子

    
{{ msg | myFilter }}

上面的代码中，首先在data中定义了一个字符串msg，现在，然后定义了一个全局过滤器myFilter,在过滤器中会将所接受到的参数中的乳猪二字替换成肥羊二字，并返回
运行截图：

微信图片_20190516164147.png

；

再来看看过滤器中的第二个参数-----回调函数

function (msg) {
        //注意  使用正则表达式的话不要加引号
        ///乳猪/g 会匹配字符串中所有的肥羊，replace会将匹配到的字符全部替换成肥羊
        return msg.replace(/乳猪/g, "肥羊");
    })

可以发现里面有一个参数，{{msg |myFilter}}中的msg的值（即data）会保存在回调函数中的第一个形参中，
接下来修改一下上面的代码：

//这里的字符串小黑牛将传给过滤器的第2个参数，也就是arg , 因为第1个是数据本身。
    
{{ msg | myFilter("小黑牛") }}

修改过滤器中的函数，加入一个形参arg,然后给过滤器传递一个参数“黑牛”，运行：

微信图片_20190516170602.png

可以发现我们传递了一个黑牛，而运行后msg中的乳猪也全变成了黑牛，这是因为使用过滤器时可以传递参数进去，可以传递多个参数，但是回调函数的第一个参数一定是要过滤的数据。

那可以同时使用多个过滤器吗？答案是肯定了，接着修改上面的代码：

    
{{ msg | myFilter("黑牛") | myFilter2 }}

新定义一个过滤器myFilter2，他的作用在原字符串的尾部加上‘-----我是过滤器2’这句话，接下来在插值表达式中在过滤器myFilter后面继续添加过滤器，

运行截图:

d568c3e3d957ab677d1d647c73670e3.png

所以msg被过滤器1过滤后返回的值会被后一个过滤器所过滤，知道最后一个过滤器才会返回最终的结果。

局部过滤器的定义

在一个页面中可以定义多个Vue的实例，每个Vue的实例都可以使用全局过滤器，既然全局过滤器是所有的Vue实例都能使用，那么私有过滤器就是只能是定义过滤器的实例使用，

定义一个私有过滤器要在创建Vue实例的实例定义，通过filters来定义（别忘了s,全局的没有s）,定义filters和定义methods差不多

    
{{ date | myFilter1 }}

所有的私有过滤器都要定义在filters中，myFilter1是过滤器的名字，function (data)函数体是要过滤要执行的方法，功能和上面的一样，将所接受到的数据中的‘今天’修改成‘明天’并返回
如图：

72a7fc04585d4a75300f54cb4f51d5c.png

可以看到，今天全部变成了明天

私有过滤器的使用方法和全局过滤器差不多，至于用谁就得实际情况来选择了

如果全局过滤器和私有过滤器重名了，那会使用谁呢？

答案是会使用私有过滤器，就近原则
例子###

    
        
        
        
    
    
        

            
            {{date | formate}}
            {{11}}