vue时间插件moment

正版图书 Head First 设计模式(中文版) headfirst设计模式深入浅出讲清 java设计模式计算机编程零基础入门教程 【在售价】41.90 元 ----------------- 【立即下单】复制$eaaXcbZbXdA$打开手机淘宝立即下单

Github地址

官网地址

使用步骤

1、npm install moment

2、引入

//Vue main.js or 单个vue组件

import moment from 'moment'
//定义一个全局过滤器实现日期格式化
Vue.filter('formatDate', function (input, fmtstring: any) {//当input为时间戳时,需转为Number类型
    // 使用momentjs这个日期格式化类库实现日期的格式化功能
    return input ? moment(input).format(fmtstring) : '';
})


3、注意,后台传过来的是时间戳

//年月日时分秒
<el-table :data="tableData">
      <el-table-column label="发送时间">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
</el-table>

//年月日时分
<el-table :data="tableData">
      <el-table-column label="发送时间">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime | formatDate('YYYY-MM-DD HH:mm') }}</span>
        </template>
      </el-table-column>
</el-table>

//年月日
<el-table :data="tableData">
      <el-table-column label="发送时间">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime | formatDate('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
</el-table>


4、效果预览

vue时间插件moment

5、其他用法请前往官网 查看、也可以前往博主xxt1ngt1ng《moment.js的方法总结》查看

栏目
榴芒一刻榴莲泡泡网红大福零食雪媚娘日本糯米糍榴莲麻薯甜品糕点 【在售价】138.00 元 【券后价】88.00元 ----------------- 【立即领券】复制$MYw6cZGNPHS$打开手机淘宝领券并下单