vue 时间戳转日期
时间: 2025-04-23 16:11:51 浏览: 25
### 实现方式一:使用自定义过滤器
在 `main.js` 中全局注册一个名为 `timefilter` 的过滤器来处理时间戳转换。此方法通过 JavaScript 内置的 `Date` 对象实现。
```javascript
// main.js
Vue.filter('timefilter', function (originVal) {
var dateObj = new Date(originVal * 1000);
let formattedTime = dateObj.toLocaleString();
return formattedTime;
})[^1];
```
模板中可以直接应用该过滤器:
```html
<text class="timestr">{{ item.create_time | timefilter }}</text>
```
这种方法简单易懂,适合不需要复杂日期格式化的场景。
### 实现方式二:借助 Moment.js 库
对于更复杂的日期格式需求,可以考虑安装并配置第三方库 Moment.js 来增强功能。
首先,在项目根目录下执行命令安装依赖包:
```bash
npm install moment --save
```
接着修改 `main.js` 文件如下所示:
```javascript
import moment from 'moment';
Vue.prototype.$moment = moment;
Vue.filter('formatDate', function (input, formatString = "YYYY-MM-DD HH:mm:ss") {
if (!input) {
return '-';
}
try {
return moment(input).format(formatString);
} catch (e) {
console.error(e.message);
return input;
}
});
```
这种方式提供了更加灵活的时间显示选项,并且易于维护和扩展[^2]。
### 实现方式三:利用 padStart 方法手动构建日期字符串
如果不想引入额外的外部库,则可以在 `main.js` 定义一个新的过滤器 `dateFormat` ,它会把原始值解析为完整的日期字符串形式。
```javascript
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(Number.parseInt(originVal));
const y = dt.getFullYear().toString(),
m = (dt.getMonth() + 1).toString().padStart(2, '0'),
d = dt.getDate().toString().padStart(2, '0');
return `${y}-${m}-${d}`;
})
```
上述代码片段展示了如何仅依靠原生 JS 函数完成基本的日期格式化操作[^4]。
阅读全文
相关推荐

















