js vue项目使用 时间日期 date 格式化

在Vue项目中，可以创建一个全局的日期格式化方法，或者在组件内部定义一个局部方法。以下是一个简单的全局日期格式化函数示例：

1. 首先，在Vue的入口文件（通常是main.js）中定义全局方法：

// main.js
import Vue from 'vue';
 
Vue.filter('formatDate', function(value) {
  if (value) {
    const date = new Date(value);
    return date.toLocaleDateString(); // 根据需要自定义格式
  }
  return value;
});
 
new Vue({
  // ...
}).$mount('#app');

2. 然后，在任何组件中，你可以这样使用这个全局的日期格式化过滤器：

<!-- MyComponent.vue -->
<template>
  <div>{{ myDate | formatDate }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      myDate: new Date() // 这里可以是任何日期对象
    };
  }
};
</script>

这个例子中，myDate是一个日期对象，通过管道符|使用了全局的formatDate过滤器来格式化日期。你可以在formatDate过滤器中自定义所需的日期格式。例如，如果你想要格式化为YYYY-MM-DD的形式，可以修改过滤器如下：

Vue.filter('formatDate', function(value) {
  if (value) {
    const date = new Date(value);
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  return value;
});

这样，在模板中使用{{ myDate | formatDate }}将会显示为YYYY-MM-DD格式的日期。