Vue中使用Day.js时间转化插件详细教程(附Vue2与Vue3写法)

npm install dayjs --save
# 或者
yarn add dayjs

// main.js
import Vue from 'vue';
import App from './App.vue';
import dayjs from 'dayjs';

// 定义一个全局过滤器用于日期格式化
Vue.filter('formatDate', (value, format = 'YYYY-MM-DD') => {
  return dayjs(value).format(format);
});

new Vue({
  render: h => h(App)
}).$mount('#app');

<template>
  <div>
    <p>格式化后的日期: {{ currentDate | formatDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  }
};
</script>

<template>
  <div>
    <p>格式化后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  computed: {
    formattedDate() {
      return dayjs(this.currentDate).format('YYYY-MM-DD');
    }
  }
};
</script>

npm install dayjs --save
# 或者
yarn add dayjs

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import dayjs from 'dayjs';

const app = createApp(App);

// 定义全局属性
app.config.globalProperties.$dayjs = dayjs;

app.mount('#app');

<template>
  <div>
    <p>格式化后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const { appContext } = getCurrentInstance();
const dayjs = appContext.config.globalProperties.$dayjs;

const currentDate = new Date();
const formattedDate = dayjs(currentDate).format('YYYY-MM-DD');
</script>

<template>
  <div>
    <p>格式化后的日期: {{ formattedDate }}</p>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';

const currentDate = new Date();
const formattedDate = dayjs(currentDate).format('YYYY-MM-DD');
</script>