zoukankan      html  css  js  c++  java
  • [Vue] : 过滤器

    过滤器

    概念: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() }
    

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

  • 相关阅读:
    王道考研复习-操作系统-进程管理(二)
    王道考研复习-操作系统-计算机系统概述(一)
    Understanding Undefined Behavior
    iOS开发需要掌握的命令
    LLDB命令速查
    Flutter简介
    poj 2115 C Looooops 扩展欧几里得算法
    poj 2635 The Embarrassed Cryptographer ??/Java??(???)
    poj 3292 Semi-prime H-numbers 筛素数(简单题)
    poj 1019 Number Sequence 数学
  • 原文地址:https://www.cnblogs.com/moon1992/p/11074791.html
Copyright © 2011-2022 走看看