Vue.js过滤器filters

夏志121

已于 2023-04-22 14:22:13 修改

阅读量1.3k

点赞数 3

分类专栏： Web前端开发与Vue.js实践文章标签： html 前端 vue.js javascript 前端框架

于 2023-04-22 11:59:41 首次发布

本文链接：https://blog.csdn.net/m0_61961937/article/details/130302483

版权

Web前端开发与Vue.js实践专栏收录该内容

35 篇文章 5 订阅

订阅专栏

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>