结合Vue、node、mongodb讲述时间
作者:LittleLuckLin
介绍: 本文是作者在使用vue页面中使用时间对象后,扩展学习的如何在后台处理时间相关数据,会以循序渐进的方式,讲述时间在vue和mongodb中的使用。希望分享出来加深对知识点的理解。有理解错误的地方欢迎指出!
可能本篇文章的知识点比较基础(作者需要努力努力再努力),可以抱着回忆知识点的心态来看待本文哈哈。
在vue页面上展示时间
简单地将时间输出到页面上
<!--html-->
<template>
<div id="app">
<p>现在的时间是: "{
{ t }}"</p>
</div>
</template>
- 通过浏览器的console,获取时间戳。
+new Date()
1583572995496
<!--script-->
data(){
return{
t:1583572995496
}
}
不过现在页面上输出的是时间戳,需要将它格式化一下输出。
- 利用filter过滤器函数,为时间换上新装,格式化时间。
Tip: 为什么用filter而不是用computed?
因为filter 无法缓存,调用频率高,适合在格式发生变化,类似时间的转换,汇率的转换之类的,数据本身不变的一般就用filter。
而computed 计算属性背后的处理逻辑比较复杂,适合在复杂的数据转换、统计计算等时候使用。
<div id="app">
现在的时间是 {
{ t | format_date }} //使用filter,要使用管道的方式为filter传参
</div>
管道,用法和 linux 管道里面的是一样的,上一个的输出是下一个执行的输入
<!--script-->
<!--filters可以有很多个的-->
filters:{
format_data(value){ //根据原来的date,格式化一下
const date = new Date(value); //将时间戳交给一个new Date(),它会将
return `${date.getFullYear()} 年 ${date.getMonth()+1}月 ${date.getDate() }日`
}
}
const date = new Date(value);
将时间戳交给一个new Date(),它会变成一个日期对象。- 通过日期对象的方法,返回年月日。如
date.getFullYear()
返回年份,注意月份是从0开始的,所以要加上一。
升级一下
- 过滤器还可以全局声明,直接注册在vue上,就不用在每个组件中都声明了。
<!--main.js-->
Vue.filter('format_date',function format_date(value){ //后面是一个过滤器的回调函数
const date =new Date(value);
console.log(date);
return `${date.getFullYear()} 年 ${date.getMonth()+1}月 ${date.getDate() }日 ${date.getHours()} 时 ${date.getMinutes()} 分 ${date.getSeconds()} 秒`;
})
Moment
- 除了用日期对象的方法将日期格式化,还能用