时间的格式化
1.第一种方法
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{time}}
</br>{{time|datefmt}}
</div>
<div id="app1">
{{time|datefmt}}
</div>
<script src="index.js"></script>
</body>
</html>
Vue.filter('datefmt',function(input){
var res = '';
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
res = year + '-' + month + '-' +day;
return res;
})
var vm = new Vue({
el:'#app',
data:{
time:new Date()
}
})
var vm = new Vue({
el:'#app1',
data:{
time:new Date()
}
})
效果图:
2.第二种方法:用字符串模版
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
2018-05-25T14:06:51.618Z
</br>{{'2018-05-25 14:06:51' |dateFormat}}
</div>
<script src="index.js"></script>
</body>
</html>
Vue.filter('dateFormat', function (dateStr,pattern=""){
//根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
//return y + '-' + m + '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
//如果调用过滤器的参数写的是yyyy-mm-dd,那就按照这个格式写
return `${y}-${m}-${d}`
}else{
//否则,后面补上时:分:秒
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
new Vue({
el:'#app',
data:{
time: new Date()
}
})
效果图:
上图中,我们可以看到5要写成05
更合适。为了实现这个功能,作出了改进
改进:用字符串的padStart方法
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='')
或 String.prototype.padEnd(maxLength, fillString='')
来填充字符串。 pad
在英文中指的是补充
。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
2018-05-25T14:06:51.618Z
</br>{{'2018-05-25 14:06:51' |dateFormat}}
</div>
<script src="index.js"></script>
</body>
</html>
Vue.filter('dateFormat', function (dateStr,pattern){
//根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2,'0')
var d = dt.getDate().toString().padStart(2,'0')
//return y + '-' + m + '-' + d
if (pattern&&pattern.toLowerCase() === 'yyyy-mm-dd') {
//如果调用过滤器的参数写的是yyyy-mm-dd,那就按照这个格式写
return `${y}-${m}-${d}`
}else{
//否则,后面补上时:分:秒
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
new Vue({
el:'#app',
data:{
time: new Date()
}
})
效果图:
pattern
参数的解释:
在做if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd')
这个判断时,逻辑是:先保证pattern参数传进来了,然后继续后面的判断。
我们不能写成:if (pattern.toLowerCase() === 'yyyy-mm-dd')
。因为,万一在调用的时候,不传递参数pattern,那么 if语句就相当于if (undefined.toLowerCase() === 'yyyy-mm-dd')
,就会报错。
因为ES6中有个新特性叫“默认参数”,我们就可以这样写:
Vue.filter('dateFormat', function (dateStr,pattern=''){
//根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2,'0')
var d = dt.getDate().toString().padStart(2,'0')
//return y + '-' + m + '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
//如果调用过滤器的参数写的是yyyy-mm-dd,那就按照这个格式写
return `${y}-${m}-${d}`
}else{
//否则,后面补上时:分:秒
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
new Vue({
el:'#app',
data:{
time: new Date()
}
})
自定义私有过滤器
私有过滤器:在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{time}}
</br>{{time|datefmt}}
</div>
<div id="app1">
{{time|datefmt}}
</div>
<script src="index.js"></script>
</body>
</html>
new Vue({
el:'#app',
data:{
time: new Date()
},
//在某一个vue对象内部定义的过滤器称之为私有过滤器,
//这种过滤器只有在当前vue对象el指定的监管的区域有用
filter:{
//input是自定义过滤器的默认参数,input的值永远都是取决于 |左边的内容
datefmt:function(input){
var res = '';
var year = input.getFullYear();
var month = input.getMonth();
var day = input.getDate();
res = year + '-' + month + '-' + day;
return res;
}
}
})
总结
过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器。