一 过滤器写法

{

{ message | Filter}}

 

二 Vue自带的过滤器:capitalize

功能:首字母大写

            
                     
                             
     
                  {
   {message | capitalize}}        
     
            

上面代码输出:Abc

 

三 Vue自带的过滤器:uppercase

功能:全部大写

            
                     
                             
     
                  {
   {message | uppercase}}        
     
            

上面代码输出:ABC

 

四 Vue自带的过滤器:uppercase

功能:全部小写

            
                     
                             
     
                  {
   {message | lowercase}}        
     
            

上面代码输出:abc

 

五 Vue自带的过滤器:currency

功能:输出金钱以及小数点

参数:

第一个参数     {String} [货币符号] - 默认值: '$'

第二个参数     {Number} [小数位] - 默认值: 2

            
                     
                             
     
                  {
   {message | currency}} 
                  {
   {message | currency '¥' "1"}} 
              
     
            

 

六 Vue自带的过滤器:pluralize

功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

参数：{String} single, [double, triple, ...

            
                     
                             
     
              {
   {message}}    {
   {message | pluralize 'item'}} 
                          
      
                
       
                    {
   {item}}    {
   {item | pluralize 'item'}} 
                        
            
      
                        
      
                
       
                    {
   {item}}    {
   {item | pluralize 'st' 'rd'}} 
                        
            
      
                        
      
                
       
                    {
   {item}}    {
   {item | pluralize 'item'}} 
                        
            
      
                        
      
                
       
                    {
   {item}}    {
   {item | pluralize 'st' 'rd'}} 
                        
            
      
        
     
            

 

七 Vue自带的过滤器:debounce

(1)限制： 需在@里面使用

(2)参数:{Number} [wait] - 默认值： 300

(3)功能：包装处理器，让它延迟执行 x ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms， 如果在延迟结束前再次调用，延迟时长重置为 x ms。

            
                     
                             
     
            
      点击我,我将10秒后消失        
     
            

 

八 Vue自带的过滤器:limitBy

(1)限制:需在v-for(即数组)里面使用

(2)两个参数:

第一个参数:{Number} 取得数量

第二个参数:{Number} 偏移量

            
                     
                             
     
            
      
 
                       
       
{
   {item}}
            
      
            
      
 
                       
       
{
   {item}}
            
      
        
     
            

 

九 Vue自带的过滤器:filterBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)

            
                     
                             
     
            
      
 
                       
       
{
   {item}}
            
      
                        
      
 
                       
       
{
   {item.name}}
            
      
                        
      
 
                       
       
{
   {item.name+"+"+item.dada}}
            
      
        
     
            

 

十 Vue自带的过滤器:orderBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Array<String> | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序

            
                     
                                 
     
            
                  
      
 
                       
       
{
   {item}}
            
      
                        
      
 
                       
       
{
   {item}}
            
      
                        
                  
      
 
                       
       
{
   {item.name}}
            
      
                        
      
 
                       
       
{
   {item.name}}
            
      
                        
                  
      
 
                       
       
{
   {item.name}}