Vue3，格式化时间的函数作为组件的方法（methods）、计算属性（computed properties）来使用

确实，在Vue3组件中，你可以将这些用于格式化时间的函数作为组件的方法（methods）来使用，或者更优雅地，作为计算属性（computed properties）来使用，特别是当你需要基于响应式数据动态地格式化时间时。

作为方法（Methods）

在Vue组件的methods对象中定义这些函数，并在模板或其他方法中调用它们。

<template>  
  <div>  
    <p>Formatted Date: {{ formatDateAsYYYYMMDD(dateString) }}</p>  
    <p>Formatted Date & Time: {{ formatDateAsYYYYMMDDHHMMSS(dateString) }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      dateString: "2024-08-16T14:29:19"  
    };  
  },  
  methods: {  
    formatDateAsYYYYMMDD(dateStr) {  
      const date = new Date(dateStr);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0');  
      const day = String(date.getDate()).padStart(2, '0');  
      return `${year}-${month}-${day}`;  
    },  
    formatDateAsYYYYMMDDHHMMSS(dateStr) {  
      const date = new Date(dateStr);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0');  
      const day = String(date.getDate()).padStart(2, '0');  
      const hours = String(date.getHours()).padStart(2, '0');  
      const minutes = String(date.getMinutes()).padStart(2, '0');  
      const seconds = String(date.getSeconds()).padStart(2, '0');  
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;  
    }  
  }  
};  
</script>

作为计算属性（Computed Properties）

如果dateString是一个响应式数据，并且你希望每当它变化时自动重新格式化时间，那么使用计算属性会更合适。但是，由于计算属性通常返回基于组件当前状态的值，而不是接受参数，因此你可能需要稍微调整你的逻辑。

如果你的时间字符串是固定的，或者你只在组件的某个特定时刻需要格式化它，那么使用计算属性可能不是最佳选择。但是，如果你正在处理一个动态变化的时间戳或日期字符串，你可以这样做：

<template>  
  <div>  
    <p>Formatted Date: {{ formattedDate }}</p>  
    <p>Formatted Date & Time: {{ formattedDateTime }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      dateString: "2024-08-16T14:29:19"  
    };  
  },  
  computed: {  
    formattedDate() {  
      const date = new Date(this.dateString);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0');  
      const day = String(date.getDate()).padStart(2, '0');  
      return `${year}-${month}-${day}`;  
    },  
    formattedDateTime() {  
      const date = new Date(this.dateString);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0');  
      const day = String(date.getDate()).padStart(2, '0');  
      const hours = String(date.getHours()).padStart(2, '0');  
      const minutes = String(date.getMinutes()).padStart(2, '0');  
      const seconds = String(date.getSeconds()).padStart(2, '0');  
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;  
    }  
  }  
};  
</script>

在这个例子中，formattedDate和formattedDateTime都是基于dateString的响应式数据自动计算得到的。当dateString变化时，Vue会自动重新计算这些计算属性的值，并在模板中更新它们。