随笔 - 34  文章 - 0  评论 - 1  阅读 - 29681 

在Vue中filter过滤器是一个非常强大的功能。
个人觉得称它为加工车间会更加贴切一些。
过滤器可以用来筛选出符合条件的,丢弃不符合条件的;
加工车间既可以筛选,又可以对筛选出来的进行加工。
一、filter的作用是:对值进行筛选加工。
二、使用的地方有两个位置,和两个方式。

{{ msg | filterA }}双括号插值内。

<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind绑定的值的地方。
(msg为需要filter处理的值,filterA为过滤器。)
方式

{{ msg | filterA }}单个使用。

{{ msg | filterA| filterB }}多个连用。

三、过滤器的制作方法:

复制代码
new Vue({
    filters:{
    //过滤器一:(使用时没有参数,即{{msg|filterA}})
          filterA(value){
            return “¥”+value
          }
        }
    })
    //添加filters属性,该属性内的函数就是过滤器。其中value就是{{msg|filterA}}中的msg。
复制代码
复制代码
new Vue({
    filters:{
    //过滤器二:(使用时有参数,即{{ msg | filterA( arg1, arg2, arg3.... )}})
               filterA (value , ...args){//其中msg为filterA中的第一个参数value。
                for(arg in args{
                  console.log(arg)
                  value+=arg
                }
                return value
              }
        },
           filterB (value , ...args){
                for(arg in args{
                  console.log(arg)
                  value+=arg
                }
                return value
              }
        }
    })
    (使用时有参数,即{{ msg | filterA( arg1, arg2, arg3.... ) | filterB( arg1, arg2, arg3.... )}})
    此时msg为filterA的第一个参数,filterA执行完后的返回值为filterB的第一个参数,以后也是依次类推。
复制代码

posted on   前端学习/vue  阅读(2414)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示