14.VUE过滤器filter

---

1.全局过滤器

    Vue.filter('myFilter',function (value){
        // return '你好 世界';
        return value.replace('hello','HELLO');
    });

    <!-- | 管道符-->
    <p>{{msg | myFilter}}</p>
    <p :title="msg | myFilter">{{msg | myFilter}}</p>
    <p>{{'一二三四五' | myFilter}}</p>

2.私有过滤器

 let vm = new Vue({
        el: "#app",
        data: {
            msg:"hello word",
            msg2:"hello world2",
        },
        methods: {
            myFilter5(value){
                return value+"你猜猜我是谁myFilter5？"
            }
        },
        filters:{
            myFilter2:function (value){
            	//设置大写
                return value.toUpperCase();
            },
            myFilter3(value,arg1,arg2){
                return value+arg1+arg2;
            },
            /*私有过滤器和全局过滤器重名的时候，私有过滤器生效!!!!*/
            myFilter4(value){
                return value+'你猜猜我是谁？myFilter4';
            }
        }
    });

<p>{{msg2|myFilter2}}</p>

    过滤器函数参数超过一个时，需要额外给其他的参数传值，但是首个参数依然无需传值

<p>{{msg2|myFilter3('你好','世界')}}</p>

    多个过滤器存在时会按照从左至右的顺序依次执行，myFilter4的value是myFilter过滤器的结果

  <p>{{msg|myFilter|myFilter4}}</p>
    <p>{{msg|myFilter4|myFilter}}</p>

    自定义函数也能够实现和过滤器相同的效果，但是过滤器功能更强大，针对性也更强，对内容的过滤操作推荐使用过滤器来完成

  <p>{{myFilter5(msg)}}</p>
   <p>{{msg|myFilter4}}</p>