vue 自定义过滤器

最新推荐文章于 2024-07-04 10:07:27 发布

笑笑樂

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量113

点赞数

文章标签： vue 过滤器

本文链接：https://blog.youkuaiyun.com/asgdfasg/article/details/112282696

版权

本文详细介绍了Vue.js中的过滤器，包括局部过滤器和全局过滤器的创建与使用方法。通过示例展示了如何定义过滤器并应用于模板中，以及如何传递参数给过滤器进行更灵活的数据处理。此外，还探讨了过滤器在数据筛选、格式化等方面的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器的作用

实现数据的筛选、过滤、格式化。

过滤器分为两种：局部过滤器和全局过滤器

局部

//	过滤器的本质 是一个有参数 有返回值的方法
　　new Vue({
　　　　filters:{
　　　　　　名称:function(val){
　　　　　　　　return val + '处理后的数据'
　　　　　　}
　　　　}
　　})

全局

 Vue.filter('名称',(val,...args)=>{
    console.log(`需要过滤的数据是:${val}`)
    return val + ' 过滤器追加的数据'
  })

过滤器使用

语法：
　　<any>{{表达式 | 过滤器}}</any>
举个例子：
　　<h1>{{price | myCurrency}}</h1>

高级用法

在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。

<h1>{{price | myCurrency('￥',true)}}</h1>


new Vue({
　　filters:{
　　　　//myInput是通过管道传来的数据
　　　　//arg1在调用过滤器时在圆括号中第一个参数
　　　　//arg2在调用过滤器时在圆括号中第二个参数
　　　　myCurrency:function(myInput,arg1,arg2){
　　　　　　return 处理后的数据
　　　　}
　　}
})