vue學習(十六) 自定義私有過濾器 ES6字符串新方法 填充字符串
阿新 • • 發佈:2019-05-12
pad 兩個 fff 調用 method === .get dst nds
<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字符串新方法 填充字符串