vue moment

作者：黑白灰调发布日期:2025-03-29 浏览:84

// 引入 Vue 和 Moment.js
import Vue from 'vue';
import moment from 'moment';

// 创建 Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      // 定义一个日期字符串
      date: '2023-10-05T14:48:32.123Z'
    };
  },
  computed: {
    // 使用 Moment.js 格式化日期
    formattedDate() {
      return moment(this.date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
});

解释说明：

引入依赖：首先我们引入了 Vue 和 Moment.js。Vue 是用于构建用户界面的渐进式框架，而 Moment.js 是一个用于解析、验证、操作和显示日期和时间的库。
创建 Vue 实例：通过 new Vue 创建一个新的 Vue 实例，并挂载到 HTML 中的 #app 元素上。
定义数据：在 data 函数中定义了一个 date 字段，它包含一个 ISO 格式的日期字符串。
计算属性：使用 computed 属性中的 formattedDate 方法来格式化日期。这里使用了 moment(this.date).format('YYYY-MM-DD HH:mm:ss') 来将日期格式化为更易读的形式。

上一篇：vue 动态style

下一篇：vue3计算属性