时间转换(vue2 过滤器 | 过滤时间 Monent.js的使用 vue.js vue-cli moment.js )

本文介绍如何使用Vue2的过滤器配合Moment.js处理时间显示。通过安装Moment.js并定义一个名为'moment'的过滤器,可以轻松地将时间戳转换为易读的时间格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文主要是写给新手的,我自己也是一个新手。大牛请忽略~如果有错误请指出
最近在写Vue的项目中遇到了时间转换的问题,所以就开始找资料。
发现可以使用Vue的过滤器(filter)来处理
处理时间的业界牛逼类库 moment.js
下面来说一下用法
第一步:安装

npm install moment --save 

第二步:在main.js中引用

import moment from 'moment/moment'

第三步:在main.js中添加过滤器

Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
    // return moment(value).format(formatString); // value可以是普通日期 20170723
    return moment.unix(value).format(formatString); // 这是时间戳转时间
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

第四步: 在vue页面中使用过滤器

<template>
  <div id="app">
      <div>
        {{ datetime | moment }}
      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      datetime: '1500799859'
    }
  }
}
</script>

第五步: 结果

2017-07-23 16:50:59
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值