vue中过滤器的用法

一、过滤器

过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。

注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器

二、使用位置

过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：

{{3 | addZero}}

11

三、分类

过滤器分为以下两种类型：

1、全局过滤器

示例代码如下：

    
    
    
    
    
    
    


    

        
        
{{3 | addZero}}
        
{{15 | addZero}}
        
        
11
        
15
    

效果：

2、本地过滤器

示例代码如下：

    
    
    
    
    
    
    


    

        
        
{{3 | addZero}}
        
{{15 | addZero}}
        
        
11
        
15
        
        
原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}
        
        
原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}
    

效果：

四、过滤器应用实例

1、使用过滤器实现省略号

代码示例如下：

    
    
    
    
    
    
    


    

                
        
        {{msg | toShowEllipsis(6)}}
    

效果：

2、使用过滤器处理时间戳

代码示例如下：

    
    
    
    
    
    
    


    

        
        
当前时间：{{curTime | toTimeStamp }}
    

效果：

到此这篇关于vue中过滤器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。