Vue 打印日期 - JavaScript

在 Vue 中，我们可以很容易地打印当前日期和时间。以下是如何使用 JavaScript 在 Vue 应用程序中打印日期的步骤。

第一步：在 Vue 组件中声明日期变量

我们需要在 Vue 组件中声明一个 date 变量。我们可以使用 new Date() 方法来创建一个当前日期和时间的实例。

<template>
  <div>
    <p>{{ date }}</p>
  </div>
</template>

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

步骤 2：为日期添加格式

我们可以使用 toLocaleString() 方法来将日期转换为本地字符串，并将其添加到 Vue 组件中。

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    formattedDate() {
      return this.date.toLocaleString()
    }
  }
}
</script>

步骤 3：添加日期格式化选项

我们可以使用 toLocaleString() 方法的选项参数来自定义日期的格式。

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    formattedDate() {
      return this.date.toLocaleString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true })
    }
  }
}
</script>

我们可以使用上述代码中的任何语句来在 Vue 应用程序中打印日期。这里是完整的代码片段。

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    formattedDate() {
      return this.date.toLocaleString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true })
    }
  }
}
</script>

以上就是如何在 Vue 中打印日期的简单步骤。