文章目錄

• 1.全域性過濾器
• 2.私有過濾器

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>