Vue-自定义私有过滤器及padStart（）补‘0’方法
2018-12-24 本文已影响0人
小鱼儿_逆流而上
私有过滤器
过滤器有两个条件：【过滤器名称和处理函数】
私有过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候，优先调用私有过滤器
<body>
<div id="app">
<p>{{msg | dateFormat('')}}</p>
</div>
<div id="app2">
<p>{{msg2 | dateFormat('')}}</p>
</div>
<script>
Vue.filter('dateFormat',function(datestr,pattern=''){
var date = new Date(datestr);
var y = date.getFullYear()
var m = date.getMonth()+1
var d = date.getDate()
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}`
}
})
var vm = new Vue({
el:'#app',
data:{
msg:new Date()
}
})
var vm2 = new Vue({
el:'#app2',
data:{
msg2:new Date()
},
filters:{
dateFormat:function(datestr,pattern=''){
var date = new Date(datestr);
var y = date.getFullYear()
var m = date.getMonth()+1
var d = date.getDate()
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>
</body>
