vue yyyy-mm-dd hh:mm:ss 转换为 yyyy-mm-dd

可以使用Vue中的过滤器来实现这个功能。具体步骤如下： 1.在Vue实例中定义一个过滤器： ``` filters: { formatDate(date) { return date.split(' ')[0]; } } ``` 2.在需要格式化日期的地方使用过滤器： ``` {{ yourDate | formatDate }} ``` 其中，yourDate是一个形如"yyyy-MM-dd hh:mm:ss"的字符串。 这样就可以将日期格式化为"yyyy-MM-dd"的形式了。

### 实现 Vue 中日期时间格式化 为了在 Vue 应用程序中将日期时间格式化为 `yyyy-MM-dd HH:mm:ss` 格式，可以采用多种方法。以下是几种常见的方式： #### 方法一：使用自定义过滤器 创建一个全局或局部的 Vue 过滤器来处理日期字符串。 ```javascript // 定义全局过滤器 Vue.filter('formatDate', function(value) { if (value) { const date = new Date(value); let year = date.getFullYear(); let month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份并补零 let day = ("0" + date.getDate()).slice(-2); // 获取日并补零 let hour = ("0" + date.getHours()).slice(-2); // 获取小时并补零 let minute = ("0" + date.getMinutes()).slice(-2); // 获取分钟并补零 let second = ("0" + date.getSeconds()).slice(-2); // 获取秒数并补零 return `${year}-${month}-${day} ${hour}:${minute}:${second}`; } }); ``` 此代码片段展示了如何通过 JavaScript 的内置对象 `Date` 来解析输入的时间戳或 ISO 字符串，并将其重新组合成所需的格式[^2]。 #### 使用方式如下所示： ```html <div>{{ '2022-07-05T09:57:39.000Z' | formatDate }}</div> <!-- 输出结果将是类似于 "2022-07-05 17:57:39" --> ``` #### 方法二：利用 moment.js 或者 dayjs 库 如果项目允许引入第三方库，则可以选择更强大的工具如 Moment.js 或 Day.js 来简化操作。 安装依赖项（以 npm 为例）: ```bash npm install moment --save # 或者对于 dayjs 用户来说 npm install dayjs --save ``` 接着可以在组件内部这样调用： ```javascript import moment from 'moment'; export default { methods: { formatDateTime(dateString) { return moment.utc(dateString).local().format('YYYY-MM-DD HH:mm:ss'); } }, }; ``` 这种方法不仅能够很好地支持国际化需求，而且提供了更多的灵活性和功能扩展选项[^3]。 #### 方法三：直接修改后端返回数据结构中的字段类型 当涉及到前后端交互时，也可以考虑调整 API 接口设计，在服务器端设置好相应的 JSON 注解，使得客户端接收到的就是已经按照预期格式化的字符串形式的时间值。 例如 Java 后端可以通过以下配置实现自动转换： ```java @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss") @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") private Date findTime; ``` 这会确保每次发送给前端的数据都已经是正确格式化后的中文标准时间表示法[^1]。