自定义dateFormat.js文件模块

  • dateFormat.js

      /**
    * 时间字符串 转 时间戳
    * @param {String} time_str 时间字符串(格式"2014-07-10 10:21:12")
    * @returns {Number} 10位数的时间戳(秒值:1404958872000)
    */
    const toTimestamp = time_str => +new Date(time_str) / 1000 /**
    * 时间戳 转 时间字符串
    * @param {Number} time_stamp 10位数的时间戳(秒值:1404958872)
    * @returns {String} 时间字符串 (格式"2014-07-10 10:21:12")
    */
    const toTimestr = time_stamp => {
    const time = new Date(time_stamp * 1000);
    const Y = time.getFullYear()
    const M = (time.getMonth() + 1).toString().padStart(2, '0')
    const D = time.getDate().toString().padStart(2, '0')
    const h = time.getHours().toString().padStart(2, '0')
    const m = time.getMinutes().toString().padStart(2, '0')
    const s = time.getSeconds().toString().padStart(2, '0')
    return `${Y}/${M}/${D} ${h}:${m}:${s}`
    } export { toTimestamp, toTimestr}
  • vue项目的main.js文件中全局注册

    // 定义全局过滤器
    import * as filters from "./dateFormat";
    Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
    })

JavaScript 日期处理类库Moment.js

  • vue项目的main.js文件中全局注册的两种形式

    • 第一种

          // 引入JavaScript 日期处理类库(格式化)
      import moment from "moment";
      // moment.locale('zh-cn') // 汉化 /**
      * 全局挂载(适用于script标签中的js代码格式化时间)
      * 使用方式:this.$moment(时间).format('时间格式')
      */
      Vue.prototype.$moment = moment;
    • 第二种

      /**
      * 注册为全局过滤器(适用于template标签中的html代码 => 插值表达式和v-bind属性绑定)
      * 使用方式:<span>{{ 时间 | formatDate('时间格式') }}</span>
      * @parms { String } formatStr 时间格式:"Y-M-D h:m:s"
      * @parms { any } data 时间:可以是时间戳,也可以是其他形式的时间,比如2019/8/14
      * 时间戳要求是毫秒值,如果是秒值,需要在过滤前 * 1000变为毫秒值
      * <span> {{ 1111111111 * 1000 | formatDate('Y-M-D h:m:s') }} </span>
      * 'hh:mm:ss'是十二小时制时间,'HH:mm:ss'是二十四小时制时间
      */
      Vue.filter('formatDate', function (date: any, formatStr: string) {
      return moment(date).format(formatStr)
      })

vue定义全局date过滤器(自定义JS文件模块和Moment.js库)的更多相关文章

  1. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  2. webstorm创建js文件时自动生成js注释

    设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @ ...

  3. php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊??????

    php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊?????? safari也无法下载 迅雷也无法下载 是不是对方网站服务器的不让下载那个js目录的文件??? 只能调用js函数啊 ...

  4. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  5. Js文件中调用其它Js函数的方法

    在项目开发过程中,也许你会遇这样的情况.在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能.我们知道,在h ...

  6. js文件中引用其他js文件

    这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...

  7. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  8. vue 定义全局函数

    方法一:main.js 注入 (1)在main.js中写入函数 Vue.prototype.changeData = function (){ alert('执行成功'); } (2)在所有组件里可调 ...

  9. vue 定义全局函数和变量

    背景 最近我在整一个网站,介绍一些有意思的网站和实用工具的网站并且把他们收集起来,网站刚建有些不成熟希望给点意见 我用的是前端框架的vue, 但是我没有打包,直接甩到服务器上了, 不想扯了, 步骤 1 ...

随机推荐

  1. centos7下ldap+kerberos实现单点登陆

    一. LDAP概念 http://wiki.jabbercn.org/index.php/OpenLDAP2.4%E7%AE%A1%E7%90%86%E5%91%98%E6%8C%87%E5%8D%9 ...

  2. 基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结 续2

    本次使用单色版本,镜头使用近焦镜头,拍摄大约30cm以内的物体和图像 更多原始图像效果,请关注百度云盘 http://pan.baidu.com/s/1cumqia

  3. Altium PCB二维码Logo设计(转 crazybingo)

    Altium PCB二维码Logo设计 每次设计PCB的时候,都会在空白部分放Logo上去,一来板卡显得更充实,二来更有成就感一些... 今天突然想着...这两年二维码越来越火,火到快爆发,不如在板卡 ...

  4. Golang 怎么给WaitGroup加超时时间

    怎么给WaitGroup加超时时间呢?刚好群里有人问了我这个问题,我就把我的方法在这边贴出来了. var w = sync.WaitGroup{} var ch = make(chan bool) w ...

  5. Python异常体系结构图

  6. 高仿 django插拔式 及 settings配置文件

    目录 基于django中间件实现插拔式 仿django settings 基于django中间件实现插拔式 start.py from notify import * send_all('好嗨哦') ...

  7. ps命令输出进程状态S后面加号的含义

    最近发现一个问题,ps命令输出里面进程状态为S+的含义,网上好多文章都说是表明进程“位于在后台进程组”. 例如下面这个ps命令输出说明: D 不可中断 Uninterruptible sleep (u ...

  8. SpringCloud服务降级案列

    一.什么是服务降级 所有的RPC技术里面服务降级是一个最为重要的话题,所谓的降级指的是当服务的提供方不可使用的时候,程序不会出现异常,而会出现本地的操作 二.服务降级案例 1.目录展示 2.导入依赖 ...

  9. YiluPHP是如何做到不用配置、不用注入就能直接使用所有的类?

    使用过YiluPHP的人都会发现,不管是模型类还是逻辑类.辅助类还是工具类,使用所有类都不需要在配置文件中设置加载或注入,也不需要在页面中使用 include 或 require 或 use ,直接使 ...

  10. OPCode 详解

    OpCode 操作码(Operation Code, OPCode):描述机器语言指令中,指令要执行某种操作的机器码 OPCode在不同的场合中通常具有不同的含义,例如PHP虚拟机(Zend VM). ...