快捷導(dǎo)航

一文詳解Vue中過濾器filters的使用

更新時間：2023年04月23日 10:06:27 作者：夏志121

Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內(nèi)容不會改變），本文主要來和大家講講過濾器filters的使用，感興趣的可以了解一下

一、局部過濾器

局部過濾器使用示例：

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

執(zhí)行結(jié)果：

這段代碼的需求是在價格前面加上人民幣符號（¥）。模板中文版（price）后邊需要添加管道符號（|）作為分隔，管道符（|）后邊是文本的處理函數(shù)（addPriceIcon），處理函數(shù)的第一個參數(shù)是管道符前邊的文本內(nèi)容（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í)行結(jié)果：

注意：當(dāng)全局過濾器和局部過濾器重名時，會采用局部過濾器

三、過濾器串聯(lián)

過濾器還可以串聯(lián)，例如：

{{price | filterA | filterB}}

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

過濾器串聯(lián)示例：

    <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í)行結(jié)果：

四、過濾器接收多個參數(shù)

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

{{ price | filterA(arg) }}

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

過濾器接收兩個參數(shù)示例：

    <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: {
                // 處理函數(shù)
                addPriceIcon(value1,value2){
                    return '￥' + value1 + value2;
                }
            }
        })
    </script>

執(zhí)行結(jié)果：

過濾器接收多個參數(shù)示例：

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

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

您可能感興趣的文章: