首页vue3 element-plus格式化TimePicker的model值

vue3 element-plus格式化TimePicker的model值

时间: 2023-08-07 07:12:06 浏览: 153

在 Vue3 中使用 Element Plus 的 TimePicker 组件时，如果要格式化其 model 值，可以使用 `v-model:value` 绑定一个计算属性，并在计算属性中进行格式化。具体的步骤如下： 1. 首先，在组件中使用 TimePicker 组件，并绑定 v-model:value： ```html <el-time-picker v-model:value="time"></el-time-picker> ``` 2. 在组件中定义一个计算属性，用于格式化 time 值： ```javascript import { ref, computed } from 'vue'; import dayjs from 'dayjs'; export default { setup() { const time = ref('12:00'); const formattedTime = computed(() => { return dayjs(`1970-01-01T${time.value}`).format('HH:mm'); }); return { time, formattedTime, }; }, }; ``` 上述代码中，我们使用了 dayjs 库来对时间进行格式化。在计算属性中，我们将 `time` 的值转换为 dayjs 对象，并使用 `format` 方法将其格式化为 `HH:mm` 格式。最终，我们将格式化后的值绑定到 `formattedTime` 上。 3. 最后，在模板中使用计算属性： ```html <el-time-picker v-model:value="time"></el-time-picker> <p>Formatted time: {{ formattedTime }}</p> ``` 这样就可以在页面上显示格式化后的时间了。需要注意的是，由于 v-model:value 是双向绑定的，所以在修改时间时需要同时更新 `time` 和 `formattedTime` 的值。

阅读全文