怎么在vue中自定义一个过滤器

这篇文章将为大家详细讲解有关怎么在vue中自定义一个过滤器,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

做网站、网站建设过程中,需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析,以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联还需要根据客户的需求进行功能模块的开发和设计,包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

1、过滤器创建

过滤器的本质是一个有参数 有返回值的方法

  new Vue({
    filters:{
      myCurrency:function(myInput){
        return 处理后的数据
      }
    }
  })

2、过滤器使用

语法:
{{表达式 | 过滤器}}

举个例子:

{{price | myCurrency}}

3、过滤器高级用法

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

①如何给过滤器传参?

{{price | myCurrency('¥',true)}}

②如何在过滤器中接收到?

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

  }

})

代码:




 
 
 




 

{{msg}}

 

{{price}}

 

{{price | myCurrency('¥')}}




 
 
 




 

{{msg}}

 

{{name | myTextTransform(false)}}



 
 
 过滤器
 
 
 
 
  

{{msg}}

  

{{price}}

  

{{price|myCurrency}}

 
   

关于怎么在vue中自定义一个过滤器就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前题目:怎么在vue中自定义一个过滤器
文章分享:http://scyanting.com/article/jochci.html

其他资讯