    <div id="root">
        <p>電腦價格：{{price | addPriceIcon}}</p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                price:200
            },
            filters: {
                //處理函數
                addPriceIcon(value){
                    console.log(value);
                    return '￥' + value;
                }
 
            }
        })
    </script>

執(zhí)行結果：

這段代碼的需求是在價格前面加上人民幣符號（¥）。模板中文版（price）后邊需要添加管道符號（|）作為分隔，管道符（|）后邊是文本的處理函數（addPriceIcon），處理函數的第一個參數是管道符前邊的文本內容（price）。

二、全局過濾器

全局過濾器使用示例：

    <div id="root">
        <p>電腦價格：{{price | addPriceIcon}}</p>
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.filter("addPriceIcon",(value)=>{
            return '￥' + value;
        })
        const vm = new Vue({
            el: '#root',
            data: {
                price:200
            }
        })
    </script>

執(zhí)行結果：

注意：當全局過濾器和局部過濾器重名時，會采用局部過濾器

三、過濾器串聯

過濾器還可以串聯，例如：

{{price | filterA | filterB}}

filterA被定義為接收單個參數的過濾器參數，表達式price的值將被作為參數傳入參數。然后繼續(xù)調用同樣被定義接收單個參數的過濾器函數filterB，將filterA的結果傳遞到filterB中。

過濾器串聯示例：

    <div id="root">
        <p>電腦價格：{{price | addPriceIcon | addChinesePriceIcon}}</p>
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.filter("addPriceIcon",(value)=>{
            return '￥' + value;
        })
        Vue.filter("addChinesePriceIcon",(value)=>{
            return '人民幣' + value;
        })
        const vm = new Vue({
            el: '#root',
            data: {
                price:200
            }
        })
    </script>

執(zhí)行結果：

四、過濾器接收多個參數

過濾器是JavaScript函數，因此可以接收兩個參數：

{{ price | filterA(arg) }}

filterA被定義為接收兩個參數的過濾器參數。其中price的值作為第一個參數，表達式arg的值可作為第二個參數，也可接收多個參數

過濾器接收兩個參數示例：

    <div id="root">
        <p>電腦價格：{{price | addPriceIcon(unit)}}</p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                price:200,
                unit:"(元)"
            },
            filters: {
                // 處理函數
                addPriceIcon(value1,value2){
                    return '￥' + value1 + value2;
                }
            }
        })
    </script>

執(zhí)行結果：

過濾器接收多個參數示例：

    <div id="root">
        {{al | filterAa(a2,a3,...an...)}}
    </div>
    <script>
        filters: {
            // 處理函數
            addPriceIcon(a1,a2,a3,...an...){
                //a1是傳入的第1個參數
                //a2是傳入的第2個參數
                //a3是傳入的第3個參數
                //......
                //an是傳入的第n個參數
            }
    </script>

以上就是一文詳解Vue中過濾器filters的使用的詳細內容，更多關于Vue過濾器filters的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: