目錄

一、安裝moment.js

二、main.js中引入moment

三、使用

1、過濾器用法

全域性過濾器

區域性過濾器

2、掛載vue上

此外，day.js也可以實現類似的功能，見：https://blog.csdn.net/qq_40323256/article/details/110930383

一、安裝moment.js

cnpm i -S moment

二、main.js中引入moment

import moment from 'moment'

三、使用

有兩種方式：過濾器用法、掛載vue上

1、過濾器用法

關於過濾器的詳細介紹可參考：https://blog.csdn.net/qq_40323256/article/details/116355085

全域性過濾器

main.js中註冊：

Vue.filter('formatDate', function (value) {
  return moment(value).format('YYYY-MM-DD HH:mm')
})

使用：

        <el-table-column label="更新日期" prop="date" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date | formatDate('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
 

效果：

區域性過濾器

<template>
  <div>
    {{ new Date() | formatDate('YYYY-MM-DD HH:mm:ss') }}
  </div>
</template>

<script>
import moment from "moment"; //引入moment

export default {
  data() {
    return {};
  },
  filters: {
    formatDate(value) {
      return moment(value).format("YYYY-MM-DD HH:mm");
    }
  }
};
</script>

 

2、掛載vue上

main.js中引入

Vue.prototype.$moment = moment//掛載Vue上

使用：

this.$moment(new Date()).format("YYYY-MM-DD")

效果：