vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
生活随笔
收集整理的這篇文章主要介紹了
vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<div id="app">
<p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //script
<script>
//自定義一個私有的過濾器(局部)
var vm = new Vue({
el:'app',
data:{
msg:''
}，
method:{},
filters:{//定義私有過濾器 過濾器有兩個條件 過濾器名稱和處理函數(shù)
formatStr:function(dataStr,pattern){
var date = new Date(dataStr)
var y = date.getFullYear()
// padStart()方法是ES6提供的填充字符串的方法，有兩個參數(shù) 第一個是 填充完后字符串的總長度，第二個參數(shù)是用什么來填充字符串
// 這里要做的是 月份 和 天數(shù) 如果是一位的話在前面補上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}-$ze8trgl8bvbq`
}else{
var hh = date.getHours()
var mm = date.getMinutes()
var ss = date.getSeconds()
return `${y}-${m}-$ze8trgl8bvbq ${hh}:${mm}:${ss}`
}
}
}
})
</script>
注意：過濾器調(diào)用的時候，采用的是就近原則，如果私有過濾器和全局過濾器名稱一致了，這時候優(yōu)先調(diào)用私有過濾器
總結(jié)
以上是生活随笔為你收集整理的vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 乔迁上大学嵌入人名的对联
- 下一篇： MySQL慢日志线上问题分析及功能优化