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中使用mockjs代码实例
Nov 25 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue css 相对路径导入问题级踩坑记录
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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
分析在Python中何种情况下需要使用断言
2015/04/01 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
争论的故事教学反思
2014/02/06 职场文书
学生自我评语大全
2014/04/18 职场文书
商场周年庆活动方案
2014/08/19 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
《打电话》教学反思
2016/02/22 职场文书
导游词之天津盘山
2019/11/01 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL