vue中格式化时间过滤器代码实例

人只需不取得标的目标,就不会取得自己。有没有人爱,我们也要努力做一个可爱的人。不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的路。

本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>
{{ message | formatTime('YMD')}}
</div>
<div>
{{ message | formatTime('YMDHMS')}}
</div>
 <div>
  {{ message | formatTime('HMS')}}
 </div>
  <div>
  {{ message | formatTime('YM')}}
 </div>
  </div>
<script>
//元素的补零计算
function addZero(val){
if(val < 10){
 return "0" +val;
}else{
 return val;
}
};


console.log(addZero(9))


//实现vue中的过滤器功能 先定义过滤器 在使用    value是过滤器前面的值,type是过滤器中定义的字段
Vue.filter("formatTime",function(value,type){
var dataTime="";
var data = new Date(); 
      data.setTime(value);
 var year  = data.getFullYear(); 
      var month = addZero(data.getMonth() + 1); 
      var day  = addZero(data.getDate());
      var hour  = addZero(data.getHours());
var minute = addZero(data.getMinutes());
var second = addZero(data.getSeconds());
if(type == "YMD"){
dataTime = year + "-"+ month + "-" + day;
}else if(type == "YMDHMS"){
dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second;
}else if(type == "HMS"){
dataTime = hour+":" + minute+":" + second;
}else if(type == "YM"){
dataTime = year + "-" + month;

}
return dataTime;//将格式化后的字符串输出到前端显示
});


var app = new Vue({
el: '#app',
data: {
 message: '1501068985877'
}
    });
</script>
</body>
</html>

以上所述是小编给大家介绍的vue格式化时间过滤器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上就是vue中格式化时间过滤器代码实例。时光,浓淡相宜;人心,远近相安。这就是最好的生活。更多关于vue中格式化时间过滤器代码实例请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能