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使用element-ui实现表单验证
Dec 13 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
星际争霸任务指南——人族
2020/03/04 星际争霸
php在线打包程序源码
2008/07/27 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
JS实现购物车特效
2017/02/02 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
师范毕业生求职信
2014/07/11 职场文书
我的中国心演讲稿
2014/09/04 职场文书
委托培训协议书
2014/11/17 职场文书
办公室个人总结
2015/02/28 职场文书
河童之夏观后感
2015/06/11 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android