Vue中過濾器filters怎么使用

這篇文章主要介紹“Vue中過濾器filters怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue中過濾器filters怎么使用”文章能幫助大家解決問題。

Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內容不會改變）

過濾器可以用在兩個地方：雙花括號插值或v-bind表達式

一、局部過濾器

局部過濾器使用示例：

    <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>

執行結果：

這段代碼的需求是在價格前面加上人民幣符號（¥）。模板中文版（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>

執行結果：

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

三、過濾器串聯

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

{{price | filterA  | filterB}}

filterA被定義為接收單個參數的過濾器參數，表達式price的值將被作為參數傳入參數。然后繼續調用同樣被定義接收單個參數的過濾器函數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>

執行結果：

四、過濾器接收多個參數 

過濾器是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>

執行結果：

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

    <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怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。