VUE 中 使用dayjs计算两个日期的差值

在Vue.js中，如果你想要使用dayjs库来计算两个日期的差值，可以先安装dayjs库（如果还没安装，可以使用`npm install dayjs`或`yarn add dayjs`），然后在计算属性中导入并利用它来进行日期处理。以下是使用dayjs计算日期差值的例子：

<template>
  <div>
    <input type="text" v-model="startDateStr" placeholder="开始日期">
    <input type="text" v-model="endDateStr" placeholder="结束日期">
    <p>间隔天数：{{ differenceInDays }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs'; // 引入dayjs库

export default {
  data() {
    return {
      startDateStr: '',
      endDateStr: '',
      differenceInDays: null,
    };
  },
  computed: {
    // 使用dayjs计算日期差值
    differenceInDays() {
      const startDate = dayjs(this.startDateStr);
      const endDate = dayjs(this.endDateStr);
      
      if (!isNaN(startDate.valueOf()) && !isNaN(endDate.valueOf())) { // 检查日期是否合法
        const diff = endDate.diff(startDate, 'days', true); // 获取绝对的天数差
        this.differenceInDays = diff;
      } else {
        this.differenceInDays = '请输入有效日期';
      }
    },
  },
};
</script>

在这个例子中，dayjs库的`diff()`函数用于计算两个日期间的差异，第一个参数是开始日期，第二个参数是结束日期，第三个参数表示返回的差值包含结束日期。如果输入的字符串无法解析成日期，`diff()`会返回NaN，因此我们需要检查这个值。