码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue] : 过滤器

时间:2019-06-24 00:35:32      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:自定义   return   lte   格式   maxlength   ret   min   bin   asc   

过滤器

概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;

私有过滤器

私有 filters 定义举例:时间格式化

filters: {
    dateFormat(dateStr) {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt.getDate().toString().padStart(2, '0')
        var hh = dt.getHours().toString().padStart(2, '0')
        var mm = dt.getMinutes().toString().padStart(2, '0')
        var ss = dt.getSeconds().toString().padStart(2, '0')
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
}

${y}-${m}-${d} ${hh}:${mm}:${ss}使用的是模板字符串方式

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=‘‘) 或 String.prototype.padEnd(maxLength, fillString=‘‘)来填充字符串;

全局过滤器

字符串的replace方法,第一个参数,除了可写一个字符串之外,还可以定义一个正则,如果第一个参数传递一个字符串,只能替换第一个匹配的字符串。可以在过滤器中传递参数。

Vue.filter('msgFormat', function(msg, arg){
    return msg.replace(/字符/g, '数字')
})

通过管道符调用过滤器,过滤器支持连续调用。

{{msg | msgFormat('XXX')}}
{{msg | filter1('XXX') | filter2() }

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

[Vue] : 过滤器

标签:自定义   return   lte   格式   maxlength   ret   min   bin   asc   

原文地址:https://www.cnblogs.com/moon1992/p/11074791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!