vue获取当前日期的方法

在Vue开发中，经常会遇到需要获取当前日期的场景，比如在表单中显示当前日期、记录数据的创建时间等。下面将介绍几种在Vue中获取当前日期的常见方法。

方法一：使用JavaScript的Date对象

JavaScript提供了内置的Date对象，可以轻松获取当前日期和时间。在Vue组件中，可以在方法或计算属性中使用Date对象来获取当前日期。

示例代码如下：

<template>
  <div>
    <p>当前日期：{{ currentDate }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    currentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

在上述代码中，通过计算属性currentDate获取当前日期，并将其格式化为YYYY-MM-DD的形式。

方法二：使用第三方日期库

除了使用JavaScript的Date对象，还可以使用第三方日期库，如moment.js或dayjs。这些库提供了更多的日期处理功能和格式化选项。

以dayjs为例，首先需要安装dayjs库：

npm install dayjs

然后在Vue组件中使用：

<template>
  <div>
    <p>当前日期：{{ currentDate }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  computed: {
    currentDate() {
      return dayjs().format('YYYY-MM-DD');
    }
  }
};
</script>

方法三：使用过滤器

Vue的过滤器可以用于格式化数据。可以创建一个日期过滤器来获取和格式化当前日期。

示例代码如下：

<template>
  <div>
    <p>当前日期：{{ new Date() | formatDate }}</p>
  </div>
</template>

<script>
export default {
  filters: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

以上就是在Vue中获取当前日期的几种常见方法，可以根据具体需求选择合适的方法。