Vue filter格式化时间戳时间成标准日期格式的方法

调用实例：yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式

<div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div>

代码：

import Vue from 'vue'
Vue.filter('dataFormat', function (value, fmt) {
 let getDate = new Date(value);
 let o = {
 'M+': getDate.getMonth() + 1,
 'd+': getDate.getDate(),
 'h+': getDate.getHours(),
 'm+': getDate.getMinutes(),
 's+': getDate.getSeconds(),
 'q+': Math.floor((getDate.getMonth() + 3) / 3),
 'S': getDate.getMilliseconds()
 };
 if (/(y+)/.test(fmt)) {
 fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
 }
 for (let k in o) {
 if (new RegExp('(' + k + ')').test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
 }
 }
 return fmt;
});

以上这篇Vue filter格式化时间戳时间成标准日期格式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 过滤器filters及基本用法

    Vue 过滤器filters及基本用法

    1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

  • Vue2.0 v-for filter列表过滤功能的实现

    使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", &quo

  • vue filter 完美时间日期格式的代码

    vue filter时间日期格式的实例代码如下所示: <template> <div>{{msg | compFilter('yyyy-MM-dd hh:mm') }}</div> </template> <script> export default { data() { return { msg: new Date() // msg: 10, } }, filters: { compFilter: function(value, format

  • vue2中filter()的实现代码

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); });1234123 完整代码如下: <!doctype html> <html> <head> <meta charset="UTF-

  • vue 过滤器filter实例详解

    vue的过滤器一般在JavaScript 表达式的尾部,由"|"符号指示: 过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等. 例如:{{ date | dateFormat }}这是过滤器的写法:{{ dateFormat(date) }}这是函数调用的写法 可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义. <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --&

  • vue 中filter的多种用法

    1.自定义的过滤器,当然这包括注册在全局和注册在实例化的内部 (1)注册在全局的fliter (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head>

  • Vue filter格式化时间戳时间成标准日期格式的方法

    调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 <div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div> 代码: import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDate = new Date(value); let o = { 'M+': getDate.getMonth() + 1,

  • Vue filter 过滤当前时间 实现实时更新效果

    过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或修改响应. 下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • js时间戳转为日期格式的方法

    js时间戳转为日期格式的方法

    什么是Unix时间戳(Unix timestamp): Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数.Unix时间戳不仅被使用在Unix系统.类Unix系统中,也在许多其他操作系统中被广泛采用. 目前相当一部分操作系统使用32位二进制数字表示时间.此类系统的Unix时间戳最多可以使用到格林威治时间2038年01月19日

  • vue将毫秒数转化为正常日期格式的实例

    过滤器-时间戳转化 第一步:定义过滤器,filters.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': d

  • Layer UI表格列日期格式化及取消自动填充日期的实现方法

    Layer UI表格列日期格式化方法较为强大 也比较简单 针对需要格式化的表格列 添加以下代码即可 ,templet : " <div> { { layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd') } } </div>" 样例 当替换了大批字段之后 运行之后 发现踩了一个大坑 那就是Layer ui框架会自动填充日期 若当前字段返回值为NULL 他会自动填充日期为当前时间

  • js将long日期格式转换为标准日期格式实现思路

    js将long日期格式转换为标准日期格式 复制代码 代码如下: <script language="javascript"> //扩展Date的format方法 Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), &q

  • C#实现将字符串转换成日期格式的方法

    本文实例讲述了C#实现将字符串转换成日期格式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: string s = "20120114161145"; Response.Write(DateTime.ParseExact(s, "yyyyMMddHHmmss", new System.Globalization.CultureInfo("zh-CN", true)).ToString()); return; 希望本文所述对大

  • idea注解参数换行时间日期格式设置方法

    idea注解参数换行时间日期格式设置 /** * @param financeMainParse * @param request * @param response * @param model * @return * @Description * @author Liruilong * @date 2020年04月08日 14:04:50 **/ @PostMapping("/mainProjectAddUpdate") @ResponseBody public int mainP

  • js实现字符串转日期格式的方法

    js实现字符串转日期格式的方法

    本文实例讲述了js实现字符串转日期格式的方法.分享给大家供大家参考.具体分析如下: 大家都知道JS是根据结果来确定数据类型的. 当然我们也是可以转化的,下面我就介绍两种关于JS字符串类型转换成日期类型的方法, 我个人比较喜欢的是第一种方法. 大家有什么别的好方法也可以分享一下. 1.eval方法转换方法,---推荐使用这种方法 我写成了一个方法大家要吧直接调用 <script type="text/javascript"> //字符串转日期格式,strDate要转为日期格式

  • 从IIS6.0升级到IIS7.0日期格式调整方法整理

    将系统从IIS6.0平台升级导IIS7时(.netframework2.0 到4.0)操作系统WINSERVER2008时,有可能会遇到系统原本显示的日期格式被转化的问题 本人就遇到原本系统的日期格式是(yyyy-M-d) 结果平台升级后变成了(yyyy/M/d) 一下是从网上获取的解决方案,在此转载,以便记忆: ---------------- Win2008 IIS7日期格式更改方法 . 服务器从32位升级到64位的WIN2008,结果就出日期格式问题,首先想到的当然是到控制面板里面更改区域

随机推荐