vue定义全局date过滤器(自定义JS文件模块和Moment.js库)
自定义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库)的更多相关文章
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- webstorm创建js文件时自动生成js注释
设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @ ...
- php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊??????
php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊?????? safari也无法下载 迅雷也无法下载 是不是对方网站服务器的不让下载那个js目录的文件??? 只能调用js函数啊 ...
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- Js文件中调用其它Js函数的方法
在项目开发过程中,也许你会遇这样的情况.在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能.我们知道,在h ...
- js文件中引用其他js文件
这一个功能的作用是做自己的js包时,可以通过引入一个整体的js文件而引入其他js. 只需要在总体的js加上这一句话 document.write("<script type='text ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
- vue 定义全局函数
方法一:main.js 注入 (1)在main.js中写入函数 Vue.prototype.changeData = function (){ alert('执行成功'); } (2)在所有组件里可调 ...
- vue 定义全局函数和变量
背景 最近我在整一个网站,介绍一些有意思的网站和实用工具的网站并且把他们收集起来,网站刚建有些不成熟希望给点意见 我用的是前端框架的vue, 但是我没有打包,直接甩到服务器上了, 不想扯了, 步骤 1 ...
随机推荐
- 016_List/Set/Map
先写一下3这种遍历方法 for循环 List<Teacher> list = new ArrayList<>(); list.add(new Teacher("张三& ...
- 【hibernate】自定义转换器
[hibernate]自定义转换器 转载:https://www.cnblogs.com/yangchongxing/p/10398255.html 1.转换基本属性 package cn.ycx.s ...
- 《Java练习题》Java编程题合集(全)
前言:不仅仅要实现,更要提升性能,精益求精,用尽量少的时间复杂度和空间复杂度解决问题. 初学者: <Java练习题>习题集一 https://www.cnblogs.com/jssj/ ...
- 分享一篇关于C#大文件上传的整个过程
简单写个小例子,记录一下此次大文件上传遇到的所有问题. 一.客户端(使用winform窗体实现) 具体功能: 点击“选择”按钮,选择要上传的文件 点击“上传文件”按钮,上传该文件调用UpLoad_Re ...
- 记录一次创建.net core 项目 并且发布到docekr【完全新手入门】
1]环境说明 操作系统:Window 10 专业版 开发工具 Vs2019专业版 Docker: Docker for Windows 2]创建.net core项目并且发布 2.0先打开并且运行 ...
- c++-面向对象:类和对象
类和对象 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string.h> using names ...
- 在mpvue引入flyio
先来说微信小程序原生的请求接口方式吧,如官网文档,在页面中请求直接调用 在这里感谢接的是提供的免费接口https://blog.csdn.net/c__chao/article/details/785 ...
- PWM是如何调节直流电机转速的?电机正反转的原理又是怎样的?
电机是重要的执行机构,可以将电转转化为机械能,从而驱动北控设备的转动或者移动,在我们的生活中应用非常广泛.例如,应用在电动工具.电动平衡车.电动园林工具.儿童玩具中.直流电机的实物图如下图所示. 1- ...
- CentOS 7 离线环境安装nginx时报错:./configure: error: C compiler cc is not found
先说解决方法: 在nginx目录下,查看objs/autoconf.err文件,该文件记录了具体的错误信息 vi objs/autoconf.err 一般就是缺少一些文件,因为我的gcc.g++也是离 ...
- Linux CentOS 7 搭建 Tomcat 8 服务器
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...