zoukankan      html  css  js  c++  java
  • Vue引入日期格式插件moment.js

    因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究

    插件地址:http://momentjs.cn/

    因为没有使用过,所有就开始各种百度,参考各位大佬的总结,大概了解了怎么使用,然后记录下来当做个笔记,免得以后搞忘了

    (1)首先在项目目录下安装  npm install moment --save

    (2)引入moment

    在main.js中引入moment

    用法一:

    import moment from 'moment'
    
    // 定义一个全局过滤器实现日期格式化
    Vue.filter('datefmt', function (input, fmtstring) {
      return moment.unix(input).format(fmtstring)
    })

     这样就可以在我们需要对时间进行格式化的组件中进行使用了,如下:

    <div class="news-info-date">
        <span class="news-date-span">{{item.publishdate | datefmt('MM/DD')}}</span>
        <span>{{item.publishdate | datefmt('YYYY')}}</span>
    </div>

    这里我有两个span标签,第一个是将时间戳格式为  月/日(11/24)  这样的格式,第二个则是格式化为年份值(如2018这样的)

    用法二:

    但是如果我们项目所需的格式都是统一格式的(例如都显示为2018-09-06),那么可以在main.js中进行统一格式样式的设置,如下:

    Vue.filter('datefmt', function (input, 'YYYY-MM-DD') {
      return moment.unix(input).format('YYYY-MM-DD')
    })

    然后在组件中这样使用即可:

    <span>{{item.publishdate | datefmt}}</span>
    

    总结:如果日期格式都是统一的,那么可以在main.js中进行统一设置(方法二),但如果日期格式有所不同,最好是在使用的组件中根据需要设置日期格式(方法一)。当然了,插件官网上还有其他的一些使用说明,比如获取今天是星期几,几天是这个月的几号这样的格式,根据需要引入格式即可...

  • 相关阅读:
    面向对象和面向过程
    视图代理(转帖)
    qt中的多线程(转)
    QT GUI总结
    Qt探秘——谈ui文件的用法
    Qt的Model/View Framework解析
    编程入门指南 v1.4
    设计模式总结(经典)
    地址
    QLayout的属性介绍
  • 原文地址:https://www.cnblogs.com/secretAngel/p/10045721.html
Copyright © 2011-2022 走看看