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基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue router 动态路由清除方式
May 25 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php xml-rpc远程调用
2008/12/19 PHP
php模板原理讲解
2013/11/13 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
高一物理教学反思
2014/01/24 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
交通事故协议书范文
2014/10/23 职场文书
七一活动主持词
2015/06/29 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Redis全局ID生成器的实现
2022/06/05 Redis