1.首先在vue中引入依赖
npm install moment --save
2.在全局配置文件main.js中进行引用配置,并使用。
import moment from 'moment'
Vue.prototype.$moment = moment
3.通过vue的method方法使用,可以实现date转为string的YYYY-MM-DD HH:mm:ss的时间格式
通过vue的method方法中使用
const data = this.$moment(时间戳).format('YYYY-MM-DD HH:mm:ss')
console.log(data) // "2019-05-25 08:23:56"
4.拓展(当你接收的时后端的一个集合遍历在前端vue时,你可以{{dateFormat(post.releasetime)}}将datetime的格式转换为‘YYYY-MM-DD HH:mm:ss’)
4.1建立一个遍历的模板
<div v-for="post in posts" :key="post.value">
<h6 class="blogTitle"><a href="#">{{post.blogtitle}}</a></h6>
<p class="blogContent"><a href="#">{{post.blogcontent}}</a></p>
<div class="blogFooter">
<ul>
<li class="blogViewingcount"><a href="#">浏览数:{{post.viewingcount}}</a></li>
<li><a href="#">点攒:{{post.likes}}</a></li>
<li><a href="#">发布于:{{dateFormat(post.releasetime)}}</a></li>
<li><a href="#">作者:{{post.authorid}}</a></li>
</ul>
</div>
</div>
4.2相关代码
<script>
export default {
name:'UserBlog',
data(){
return {
posts:[]
}
},
methods:{
//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat:function(time) {
const data = this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
return data
}
},
mounted(){
//console.log("000");
//请求博客内容
this.$axios.post('/api/blog').then(res => {
console.log(res)
//将后端获取的数据赋值给posts集合
this.$data.posts = res.data
})
}
}
</script>
4.3在上面的js里的方法里面进行转换时间格式
methods:{
//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat:function(time) {
const data = this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
return data
}
},