首页分享 Vue数据时间格式化的方法

Vue数据时间格式化的方法

来源：花匠小妙招时间：2024-12-15 11:38

根据提供的引用内容，可以看出这是关于Vue Table中格式化数据的问题。在Vue3中，可以使用过滤器或计算属性来格式化数据。 1. 使用过滤器格式化数据可以在Vue3中使用过滤器来格式化数据。过滤器可以在模板中使用，用于格式化文本、日期、数字等数据。以下是一个使用过滤器格式化日期的例子： ```html <template> <div> <p>原始日期：{{ date }}</p> <p>格式化后日期：{{ date | dateFormat }}</p> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const date = ref('2022-01-01'); const dateFormat = (value) => { if (value != null) { return moment(value).format('YYYY年MM月DD日'); } }; return { date, dateFormat, }; }, }; </script> ``` 2. 使用计算属性格式化数据除了使用过滤器，还可以使用计算属性来格式化数据。计算属性是基于响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新计算。以下是一个使用计算属性格式化金额的例子： ```html <template> <div> <p>原始金额：{{ amount }}</p> <p>格式化后金额：{{ formattedAmount }}</p> </div> </template> <script> import { ref, computed } from 'vue'; export default { setup() { const amount = ref(10000); const formattedAmount = computed(() => { return `¥${amount.value.toLocaleString()}`; }); return { amount, formattedAmount, }; }, }; </script> ```