过滤器

        Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。

       过滤器可以用在两个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由管道符指示。

{{ msg | filter }}

• 支持传参：

// 多个参数可以使用（ , ）分隔
{{ msg | filter(val1,val2) }}

• 支持串联：

{{ msg | filter1 | filter2 }}

       串联，filter1 被定义为接收单个参数的过滤器函数，首先表达式 msg 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filter2，将 filter1 的结果传递到 filter2 中。

全局过滤器

       在创建 vue 实例之前创建，所有的 Vue 实例都可以使用。

定义全局语法:

Vue.filter("过滤器名称",function () {})

       过滤器中的 function ，它的第一个参数，是已经被规定好了的，永远都是过滤器管道符前面表达式的值。

事例： 1.

<div id="app">
    <p>{{msg}}</p>
    <p>{{ msg | f }}</p>
</div>

<script>
 Vue.filter("f",function (msg) {
    //replace 查找并替换方法 ，第一个参数可写一个字符串，也可定义一个正则
    return msg.replace(/这/g,"那");
 })
 var vm=new Vue({
    el: "#app",
    data: {
        msg:"这是一段文字，这是一段文字"
    }
 })
</script>

2.使用传参的方式：

<p>{{ msg | f("那") }}</p>`

Vue.filter("f",function (msg,arg) {
       return msg.replace(/这/g,arg);
})

私有过滤器

       也可以定义本地的（私有）过滤器。

定义方式：

filters:{ 过滤器名称:function(){处理函数} }

       过滤器在调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，会优先调用私有过滤器。

<div id="app">
    <p>{{msg}}</p>
    <p>{{ msg | f }}</p>
</div>

<script>
    //全局过滤器和私有过滤器名字相同，采用的是私有过滤器
    //1.全局过滤器
    Vue.filter("f",function (msg) {
        return msg.replace(/这/g,"那");
    })
    var vm=new Vue({
        el: "#app",
        data: {
            msg:"这是一段文字，这是一段文字"
        },
        //2.私有过滤器
        filters:{
            f:function(msg){
                return msg+"========";
            }
        }
    })
</script>