1、安装 moment
npm install moment --save
2、引入 moment
- 1.局部使用,在使用的组件里引入
import moment from 'moment'
- 2.全局使用,在main.js里引入
import Moment from 'moment'
Vue.prototype.$moment = Moment
需求是
超过 一分钟内 显示 刚刚
没有超过60分钟显示 多少多少分钟前
超过 60分钟 在一天内 显示几点几分
超过一天 显示 没有超过7天 显示 几天前
超过7天显示 年月日
<template>
<view class="content">
<view v-for="(item,index) in list" :key="index">
<view class="item">
<view>{{item.name}}</view>
<view>{{item.createTime}}</view>
</view>
</view>
</view>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
list: [],
}
},
onLoad() {
this.obtain()
},
methods: {
obtain() {
// 模拟请求接口数据
let res = [
{
name: '内容000',
createTime: "2024-3-11 07:00:32"
},
{
name: '内容111',
createTime: "2024-3-13 07:00:32"
},
{
name: '内容222',
createTime: "2024-3-19 07:06:22"
},
{
name: '内容333',
createTime: "2024-3-19 16:06:22"
},
{
name: '内容444',
createTime: "2024-3-19 16:19:22"
}
]
// 格式化时间
res.forEach(item => {
let createTime = moment(item.createTime)
let currentTime = moment()
let diffMinutes = currentTime.diff(createTime, 'minutes')
let diffDays = currentTime.diff(createTime, 'days')
if (diffMinutes < 1) {
item.createTime = '刚刚'
} else if (diffMinutes < 60) {
item.createTime = diffMinutes + '分钟前'
} else if (diffDays < 1) {
item.createTime = createTime.format('HH:mm')
} else if (diffDays < 7) {
item.createTime = diffDays + '天前'
} else {
item.createTime = item.createTime.substring(0, 10);
}
})
this.list = res
}
}
}
</script>
<style lang="scss">
.item {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
</style>