vue中过滤器如何使用

这篇文章主要介绍"vue中过滤器如何使用"，在日常操作中，相信很多人在vue中过滤器如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"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中过滤器如何使用"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！