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>

注意：過濾器調用的時候，採用的是就近原則，若是私有過濾器和全局過濾器名稱一致了，這時候優先調用私有過濾器