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

<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>

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

转载于:https://www.cnblogs.com/xuchao0506/p/10853407.html