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) {
    let o = {
      "M+": value.getMonth() + 1,![图片描述][1]
      "d+": value.getDate(),
      "h+": value.getHours(),
      "m+": value.getMinutes(),
      "s+": value.getSeconds(),
    }
    if(/(y+)/.test(format)){
      format = format.replace(RegExp.$1, (value.getFullYear() + "").substr(4-RegExp.$1.length));
      for(let k in o) {
        if(new RegExp(`(${k})`).test(format)){
          format = format.replace(RegExp.$1, (RegExp.$1.length == 1)?(o[k]):(("00" + o[k]).substr((""+o[k]).length)))
        }
      }
      return format;
    }
  }
},
}
</script>

知识点扩展：

vue filter方法-时间格式化

plugins/filter.js

import Vue from 'vue'
// 时间格式化
// 用法：<div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div>
Vue.filter('formatDate', 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;
})

nuxt.config.js

 plugins: ['@/plugins/element-ui', '@/plugins/filters.js'],

总结

以上所述是小编给大家介绍的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 中filter的多种用法

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

  • 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 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

  • vue 过滤器filter实例详解

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

  • 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,

  • 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 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

  • vue获取时间戳转换为日期格式代码实例

    vue获取时间戳转换为日期格式. 方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi): // date.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }

  • .Net与JS时间日期格式的转换问题对比分析

    本文实例分析了.Net与JS时间日期格式的转换问题.分享给大家供大家参考,具体如下: Js中的1415349957524整数 ,其实代表的是1970.1.1 00:00:00至现今某个时间点的时间间隔毫秒数.而在.Net中,我们可以用Ticks属性得到0001.1.1 00:00:00至现今某个时间点的时间间隔毫秒数. 具体代码实现如下所示: JS: //获取1970.1.1 00:00:00至现在的毫秒数 var milDate = +(new Date); .Net: //获取1970.1.

  • 浅析GridView中显示时间日期格式的问题

    以下都是GridView基本常用的日期,时间格式 形式 语法 结果 注释 数字 {0:N2} 12.36   数字 {0:N0} 13   货币 {0:c2} $12.36   货币 {0:c4} $12.3656   货币 "￥{0:N2}" ￥12.36   科学计数法 {0:E3} 1.23E+001   百分数 {0:P} 12.25% P and p present the same. 日期 {0:D} 2006年11月25日   日期 {0:d} 2006-11-25  

  • js和C# 时间日期格式转换的简单实例

    下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整数1335258540000实际上是一个1970 年 1 月 1 日 00:00:00至这个DateTime中间间隔的毫秒数.通过javascript用eval函数可以把这个日期字符串转换为一个带有时区的Date对象,如下 用var date = eval('new ' + eval('/Date(

  • python中有关时间日期格式转换问题

    每次遇到pandas的dataframe某列日期格式问题总会哉坑,下面记录一下常用时间日期函数.... 1.字符串转化为日期 str->date import datetime date_str = '2006-01-03' date_ = datetime.datetime.strptime(date_str,'%Y-&m-%d') 这是单个字符串的转化,其中"%Y-%m-%d"表示日期字符串的格式,若date_str='2006/1/3',则可写为"%Y/%

  • 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

  • Java实现时间日期格式转换示例

    Java时间格式转换大全 import java.text.*; import java.util.Calendar; public class VeDate { /** * 获取现在时间 * * @return 返回时间类型 yyyy-MM-dd HH:mm:ss */ public static Date getNowDate() { Date currentTime = new Date(); SimpleDateFormat formatter = new SimpleDateForma

  • MongoDB批量将时间戳转为通用日期格式示例代码

    前言 时间戳(timestamp),通常是一个字符序列,唯一地标识某一刻的时间.本文将详细介绍MongoDB批量将时间戳转为通用日期格式的相关内容,下面话不多说了,来一起看看详细的介绍吧 1,官网提供的MONGODB遍历脚本: 官方文档地址:https://docs.mongodb.org/manual/tutorial/remove-documents/ >var arr = ["ab","cd","ef"] >var show =

  • JavaScript检查是否是正确的日期格式的代码

    JavaScript 检查是否是正确的日期格式 function check(){ str = form1.txt.value; str = str.match(/^(\d{2,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if (str == null){ alert('你输入的日期格式无效'); return false; }else if (str[3]>12 || str[4]>31){ alert("你输入的日期格式无效"); return

随机推荐