vue使用过滤器格式化日期


Posted in Vue.js onJanuary 20, 2021

本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下

案例要求

vue使用过滤器格式化日期

案例讲解

1、查看未过滤格式化的日期格式
2、设置模板函数format 接收日期值和日期格式
3、按照日期格式对日期进行拼接并返回值
4、将拼接好的日期显示在页面上

最终案例效果

vue使用过滤器格式化日期

代码

设置日期显示格式

<div id="app">
    <div>{{date }}</div>
    <div>{{date | format('yyyy-MM-dd')}}</div>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss:S')}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    // Vue.filter('format', function (value, arg) {
    //   // console.log(arg);
    //   if (arg == 'yyyy-MM-dd') {
    //     var ret = '';
    //     ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    //     return ret;
    //   }
    // })
    Vue.filter('format', function (value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d +)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒

        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v != undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: "#app",
      data: {
        date: new Date(),
      },

    });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
You might like
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
一分钟理解js闭包
2016/05/04 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
Vue实现简单分页器
2018/12/29 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python在不同条件下的输入与输出
2020/02/13 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
简短证婚人证婚词
2014/01/09 职场文书
元旦获奖感言
2014/03/08 职场文书
信息工作经验交流材料
2014/05/28 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis