vue3渲染时间转换格式
时间: 2024-11-23 17:03:40 浏览: 13
Vue 3 中,如果你需要将日期时间从服务器响应或者其他数据源获取到后进行格式化,可以使用 JavaScript 的内置 `Date` 对象配合一些库,如 Moment.js 或者其简化版 Vue 自带的 `vue-date-picker` 插件,或者是更现代的选择如 `dayjs` 或者 `axios-timeago`。
例如,使用 `dayjs` 进行时间格式转换:
```javascript
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export default {
computed: {
formattedDateTime() {
const now = dayjs();
const receivedDate = // 从服务器获取的时间
return receivedDate.from(now);
}
},
};
```
如果你使用的是 Axios 并希望实时更新,可以利用 `axios-timeago`:
```javascript
import axios from 'axios';
import axiosTimeago from 'axios-timeago';
axios.interceptors.request.use(response => {
if (response.data && response.data.timestamp) {
response.data.formattedDateTime = axiosTimeago.format(response.data.timestamp);
}
return response;
}, error => Promise.reject(error));
// 然后在模板中显示formattedDateTime字段
{{ formattedDateTime }}
```
阅读全文