Vue-过滤器(系统过滤器和自定义过滤器)

1. 系统过滤器

    
    
    


    

        
        
(0)原字符：{{text1}}
        
(1)系统过滤器capitalize-首字符大写：{{text1 | capitalize}}
        
(2)系统过滤器uppercase-小写转大写：{{text1 | uppercase}}
        
(3)系统过滤器lowercase-大写转小写：{{text1 | lowercase}}
        
(4)系统过滤器currency-数字转货币-默认美元：{{number1 | currency}}
        
(4)系统过滤器currency-数字转货币-过滤器加参数：{{number1 | currency '¥'}}
        
(5)系统过滤器pluralize-字符加后缀：{{text1}}{{text1 | pluralize '.png'}}
        
(6)系统过滤器-对象转json：{{list | json}}
        
(6)系统过滤器-对象转json同时小写转大写：{{list | json | uppercase}}

        
(7)系统过滤器-debounce：
        
(8)系统过滤器-limitBy：从开始位置开始显示几个
        

            {{item}}
        
        
(8)系统过滤器-limitBy：从哪个位置开始显示几个
        

            {{item}}
        
        
(9)系统过滤器-filterBy：参考案例的使用
        
(10)系统过滤器-orderBy：排序

    

eg1：利用vue1.0中的系统过滤器filterBy实现列表按条件刷选查询

条件刷选.png

    
    
    
    


    

        

            
            
            添加

            
            
        
        
        

            

                
编号
                
名称
                
创建时间
                
操作
            
            

                
当前列表无数据
            
            
            

                
{{item.id}}
                
{{item.name}}
                
{{item.creatTime}}
                
                
删除
            
        
    

2. 自定义过滤器

2.1 自定义私有过滤器

    
    
    


    区域1：
    

        {{time}}
        

        {{time | dateFormat}}
    

    区域2：
    
    

        {{time}}
        

        {{time | dateFormat}}
    

2.1 自定义全局过滤器

    
    
    


    区域1：
    

        {{time}}
        

        {{time | dateFormat}}
    

    区域2：
    

        {{time}}
        

        {{time | dateFormat}}
    

eg2：利用自定义过滤器实现日期格式化

日期格式化.png

    
    
    
    


    

        

            
            
            添加

            
            
        
        
        

            

                
编号
                
名称
                
创建时间
                
操作
            
            

                
当前列表无数据
            
            
            

                
{{item.id}}
                
{{item.name}}
                
                
{{item.creatTime | dateFormat 'yy-MM-dd HH:mm:ss'}}
                
                
删除