vue 将yyyy-mm-dd 转 yyyy-mm-dd hh:min:ss

### Vue.js 中实现日期格式转换 在 Vue.js 中可以利用自定义过滤器或者方法来完成日期格式的转换。以下是具体实现方式： #### 自定义过滤器实现 通过创建一个全局或局部过滤器，能够方便地将 `yyyy-mm-dd` 转换为 `yyyy-mm-dd hh:mm:ss`。 ```javascript // 定义全局过滤器 Vue.filter('formatDate', function(value) { if (!value) return ''; // 如果输入为空，则返回空字符串 const date = new Date(value); // 将传入的时间字符串解析为 Date 对象 const year = date.getFullYear(); let month = ('0' + (date.getMonth() + 1)).slice(-2); let day = ('0' + date.getDate()).slice(-2); let hours = ('0' + date.getHours()).slice(-2); let minutes = ('0' + date.getMinutes()).slice(-2); let seconds = ('0' + date.getSeconds()).slice(-2); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }); ``` 在模板中可以直接调用该过滤器[^1]： ```html <div>{{ '2023-10-05' | formatDate }}</div> ``` #### 使用计算属性或方法实现 如果不想使用过滤器，也可以通过计算属性或方法来进行处理。 ```javascript export default { data() { return { dateValue: '2023-10-05' }; }, methods: { formatDate(dateString) { if (!dateString) return ''; const date = new Date(dateString); const year = date.getFullYear(); let month = ('0' + (date.getMonth() + 1)).slice(-2); let day = ('0' + date.getDate()).slice(-2); let hours = ('0' + date.getHours()).slice(-2); let minutes = ('0' + date.getMinutes()).slice(-2); let seconds = ('0' + date.getSeconds()).slice(-2); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; } } }; ``` 在模板中可以通过方法调用来显示结果[^2]： ```html <div>{{ formatDate('2023-10-05') }}</div> ``` #### Vue 3 的 Composition API 实现 对于 Vue 3 用户，推荐使用 Composition API 来封装日期格式化逻辑。 ```javascript import { ref } from 'vue'; function useDateFormat(inputDate) { const formattedDate = ref(''); const format = () => { if (!inputDate.value) return; const date = new Date(inputDate.value); const year = date.getFullYear(); let month = ('0' + (date.getMonth() + 1)).slice(-2); let day = ('0' + date.getDate()).slice(-2); let hours = ('0' + date.getHours()).slice(-2); let minutes = ('0' + date.getMinutes()).slice(-2); let seconds = ('0' + date.getSeconds()).slice(-2); formattedDate.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }; inputDate.value && format(); return { formattedDate }; } export default { setup() { const inputDate = ref('2023-10-05'); const { formattedDate } = useDateFormat(inputDate); return { formattedDate }; } }; ``` 在模板中展示结果： ```html <div>{{ formattedDate }}</div> ``` --- ### 注意事项 1. 输入的日期字符串应符合 ISO 标准（如 `'2023-10-05'`），否则可能无法被正确解析。 2. 若需要支持更多时间格式，可扩展函数中的逻辑以满足需求。 ---