vue 中时间日期格式处理

在Vue中，可以使用过滤器(filters)来格式化时间和日期。但从Vue 3.0开始，建议使用函数来代替过滤器，因为过滤器不能用于Vue 3.0的setup()函数内。

以下是一个使用函数来格式化时间日期的例子：

<template>
  <div>
    <p>当前时间: {{ formatDateTime(new Date()) }}</p>
  </div>
</template>
 
<script>
export default {
  setup() {
    // 定义一个函数来格式化日期时间
    const formatDateTime = (date) => {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };
 
    // 返回函数，以便在模板中使用
    return {
      formatDateTime
    };
  }
};
</script>

在这个例子中，formatDateTime函数接收一个Date对象作为参数，并返回一个格式化的日期时间字符串。padStart方法用于确保单数字月份、日期、小时、分钟和秒钟有前导零。这样可以确保所有的时间部分都是两位数字，便于格式化。