vue 日期格式化 {y}-{m}-{d} {h}:{i}:{s} 24小时制
时间: 2023-09-20 08:14:06 浏览: 31
你可以使用 Vue.js 的过滤器来格式化日期。你可以创建一个全局过滤器,然后在模板中使用它来格式化日期。下面是一个示例:
首先,在你的 Vue 实例中注册一个全局过滤器:
```javascript
Vue.filter('dateFormat', function (value) {
if (!value) return ''
const date = new Date(value)
const year = date.getFullYear()
const month = ('0' + (date.getMonth() + 1)).slice(-2)
const day = ('0' + date.getDate()).slice(-2)
const hours = ('0' + date.getHours()).slice(-2)
const minutes = ('0' + date.getMinutes()).slice(-2)
const seconds = ('0' + date.getSeconds()).slice(-2)
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})
```
然后,在你的模板中使用该过滤器来格式化日期:
```html
<template>
<div>
<p>{{ myDate | dateFormat }}</p>
</div>
</template>
```
确保将 `myDate` 替换为你要格式化的日期变量。
这样,`myDate` 的值将以 `{y}-{m}-{d} {h}:{i}:{s}` 的格式显示,使用24小时制。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)