快捷導(dǎo)航

一文詳解Vue中過(guò)濾器filters的使用

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

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

一、局部過(guò)濾器

局部過(guò)濾器使用示例：

    <div id="root">
        <p>電腦價(jià)格：{{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é)果：

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

二、全局過(guò)濾器

全局過(guò)濾器使用示例：

    <div id="root">
        <p>電腦價(jià)格：{{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)全局過(guò)濾器和局部過(guò)濾器重名時(shí)，會(huì)采用局部過(guò)濾器

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

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

{{price | filterA | filterB}}

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

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

    <div id="root">
        <p>電腦價(jià)格：{{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é)果：

四、過(guò)濾器接收多個(gè)參數(shù)

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

{{ price | filterA(arg) }}

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

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

    <div id="root">
        <p>電腦價(jià)格：{{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é)果：

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

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

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

您可能感興趣的文章: