首页 > 其他 > 详细

vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

时间:2019-05-12 20:08:31      阅读:181      评论:0      收藏:0      [点我收藏+]
<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.getScends()
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    }   })
</script>

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

vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

原文:https://www.cnblogs.com/xuchao0506/p/10853407.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!