Vue 数据表日期格式 - Html

当我们渲染数据表时，日期格式通常需要进行特殊处理。Vue 和 HTML 提供了多种方式来格式化日期，本篇文章将介绍其中的几种方式。

日期过滤器

过滤器可以用来格式化数据表的日期，例如将日期格式化为 "YYYY-MM-DD" 格式。

<!-- 在模板中使用 date 过滤器 -->
<td>{{ date | formatDate }}</td>

// 在 Vue 实例中定义过滤器
Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('YYYY-MM-DD')
  }
})

Moment.js

Moment.js 是一个流行的 JavaScript 日期库，可以方便地处理日期和时间。在使用 Moment.js 之前，需要先安装和引入 Moment.js 库。

<!-- 在模板中使用 Moment.js 格式化日期 -->
<td>{{ moment(date).format("YYYY-MM-DD") }}</td>

// 在 Vue 实例中引入 Moment.js
import moment from 'moment'

// 在 Vue 实例中将 Moment.js 设置为全局函数
Vue.prototype.$moment = moment

Native JavaScript

除了使用第三方库，还可以使用 JavaScript 自带的日期方法来格式化日期。这种方式需要手动编写过滤器。

<!-- 在模板中使用 nativeDate 过滤器 -->
<td>{{ date | nativeDate }}</td>

// 在 Vue 实例中定义 nativeDate 过滤器
Vue.filter('nativeDate', function(value) {
  if (value) {
    const date = new Date(value)
    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    return `${year}-${month}-${day}`
  }
})

以上是几种常见的格式化日期方式，可以根据实际需求选择适合自己的方式。