<div id="app">
 <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //script
<script>
  //自定义一个私有的过滤器(局部)
  var vm = new Vue({
    el:'app',
    data:{
      msg:''
    },
    method:{},
    filters:{//定义私有过滤器 过滤器有两个条件 过滤器名称和处理函数
      formatStr:function(dataStr,pattern){
        var date = new Date(dataStr)
        var y = date.getFullYear()
        // padStart()方法是ES6提供的填充字符串的方法,有两个参数 第一个是 填充完后字符串的总长度,第二个参数是用什么来填充字符串
        // 这里要做的是 月份 和 天数 如果是一位的话在前面补上0 比如:2019-02-04
        var m = (date.getMonth()+1).toString().padStart(2,'0')
        var d = (date.getDate()).toString().padStart(2,'0')
        if(pattern.toLowerCase()==='yyyy-MM-dd'){
          return `${y}-${m}-${d}`
        }else{
          var hh = date.getHours()
          var mm = date.getMinutes()
          var ss = date.getSeconds()
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    }
  })
</script>

注意:过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器

vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串的更多相关文章

  1. Vue学习笔记【12】——过滤器

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

  2. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  3. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  4. 看es6 字符串新方法有感

    'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // " ...

  5. vue学习(十五) 过滤器简单实用

    vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name ...

  6. vue学习-day02(自定义指令,生命周期)

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  7. Vue系列之 => 全局,私有过滤器

    私有过滤器也称局部过滤器 <script> // 全局过滤器 Vue.filter("datatime",function(timestr){ var tm = new ...

  8. vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

    需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...

  9. vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法

    //html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...

随机推荐

  1. Flask02-Template

    ## 基础使用 $ vim app/templates/index.html > <html> > <head> > <title>{{title ...

  2. JavaScript基础对象创建模式之模块模式(Module Pattern)(025)

    模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织 代码块,这些黑盒的代码块内的功能可以根据不断变化的软件 ...

  3. JAVA设计模式 4【创建型】理解建造者模式

    Hello,又是拖了几天更,实在是忙的要死,有时候忙累了,真的就是倒头睡的那种,刚好今天闲下来了.今天来更新一篇建造者模式. 其实建造者模式,我们已经在上一节已经有了解过了.只不过是上一节没有提到这样 ...

  4. Python3笔记001 - 1.1 python概述

    第1章 认识python python语言特点 跨平台 开源的 解释型 面向对象 python语言的特点是:以对象为核心组织代码,支持多种编程范式,采用动态类型,自动进行内存回收,并能调用C语言库进行 ...

  5. Spring笔记(2) - 生命周期/属性赋值/自动装配及部分源码解析

    一.生命周期 @Bean自定义初始化和销毁方法 //====xml方式: init-method和destroy-method==== <bean id="person" c ...

  6. PHPstorm快捷键的学习

    1.Ctrl + 空格 当输入代码时,PHPstorm 会自动出现联想选项. 但是,如果在输入时联想时错过了选择,我们要想让他再一次出现联想,通常采用的方法是在先前的输入后面再输入字符,这时联想又会出 ...

  7. 【盗版动归】Codeforces998C——Convert to Ones 归一操作

    嘤嘤嘤,因为最近文化课老师追的紧了+班主任开班会,所以这博客是赶制的赝品 题目: You've got a string a1,a2,…,ana1,a2,…,an, consisting of zer ...

  8. day55 js进阶

    目录 引子 一.BOM操作 1 window对象 2 window子对象 3 history对象 4 location对象(掌握) 5 弹出框 6 计时器相关 二.DOM操作 1 查找标签 1.1 直 ...

  9. day54 js基础

    目录 一.变量 二.数据类型 1 数值类型(number) 2 字符类型(string) 3 字符类型常用方法 4 布尔值(boolean) 5 null与undefined 6 对象 7 运算符 8 ...

  10. CTF_show平台 web题解 part3

    web13 题目显示文件上传,各类型上传均提示错误,在使用ctf-scan扫描的时候,发现upload.php.bak. 查看源码: <?php header("content-typ ...