vue dayjs

// 引入 Vue 和 Day.js
import Vue from 'vue';
import dayjs from 'dayjs';

// 创建 Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      currentDate: dayjs().format('YYYY-MM-DD'), // 使用 Day.js 获取当前日期并格式化
      selectedDate: '' // 用户选择的日期
    };
  },
  methods: {
    updateDate(newDate) {
      this.selectedDate = dayjs(newDate).format('YYYY-MM-DD'); // 更新选中的日期
    }
  }
});

解释说明：

1. 引入依赖：

   • Vue：用于创建 Vue 实例。
   • dayjs：轻量级的日期处理库，替代 Moment.js。

2. 创建 Vue 实例：

   • el: '#app'：将 Vue 实例挂载到 HTML 中带有 id="app" 的元素上。
   • data()：定义组件的数据属性。
     • currentDate：使用 dayjs().format('YYYY-MM-DD') 获取当前日期，并将其格式化为 YYYY-MM-DD 格式。
     • selectedDate：存储用户选择的日期，默认为空字符串。

3. methods：

   • updateDate(newDate)：当用户选择新日期时，调用此方法更新 selectedDate。通过 dayjs(newDate).format('YYYY-MM-DD') 将新日期格式化为 YYYY-MM-DD 格式。

HTML 示例：

<div id="app">
  <p>当前日期: {{ currentDate }}</p>
  <input type="date" v-model="selectedDate" @change="updateDate(selectedDate)">
  <p>你选择的日期是: {{ selectedDate }}</p>
</div>

这段代码展示了如何在 Vue 项目中使用 Day.js 来处理和格式化日期。