Vue.js过滤器filters

╰+哭是因爲堅強的太久メ 2024-03-23 16:07 68阅读 0赞

![666b410860d144eb91c2a90ee68baa74.gif][]

**目录**

一、局部过滤器

二、全局过滤器

三、过滤器串联

四、过滤器接收多个参数

--------------------

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

执行结果：

![e6fcb12f168a4cdab1b6047df5229331.png][]

这段代码的需求是在价格前面加上人民币符号（¥）。**模板中文版（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>

执行结果：

![3f539e3408bf4597ab0276b6e4a4a43c.png][]

**注意：**当全局过滤器和局部过滤器重名时，会采用局部过滤器

## 三、过滤器串联 ##

过滤器还可以串联，例如：

> **\{ \{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>

执行结果：

![5e5b7ff08545406cb1a530cf280b8fb1.png][]

## 四、过滤器接收多个参数 ##

过滤器是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>

执行结果：

![8be3656a54644b3f9772f5f7e940b0e4.png][]

过滤器接收多个参数示例：

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

[666b410860d144eb91c2a90ee68baa74.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fde77294765e4951b570573f8707c74b.png
[e6fcb12f168a4cdab1b6047df5229331.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/5111fdd19c744a11b2c8ef153c243531.png
[3f539e3408bf4597ab0276b6e4a4a43c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0d3562b7954c4ae28dc6b7830a79616d.png
[5e5b7ff08545406cb1a530cf280b8fb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/adb22f6b2ab74a9c9f55b129e8fdfd18.png
[8be3656a54644b3f9772f5f7e940b0e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ac45b350103442d78dab9f1a46dcb538.png