本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下
1、查看未过滤格式化的日期格式
2、设置模板函数format 接收日期值和日期格式
3、按照日期格式对日期进行拼接并返回值
4、将拼接好的日期显示在页面上
设置日期显示格式
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
在讲网页表格的结构化标记之前,还是先看几幅图片。 Html表格的结构化 所谓的结...
本文对JavaScript中的this关键字进行全方位的解析,看完本篇文章,希望读者们能...
***设置超链接的样式示例 a:link 超链接被点前状态 a:visited 超链接点击后状态 ...
STL中的容器 deque容器的常用接口及用法 deque 它被称作 双端数组 可以在头部和...
总结hibernate框架的常用检索方式 1、hibernate框架的检索方式有以下几种: OID...
演示地址: http://52515.net/lib/upfile/ubb/ 下载地址: http://52515.net/lib...
用Javascript实现留言板案例(附带删除留言),供大家参考,具体内容如下 正在学...
我们已经写了两篇关于 Ansible 的文章,这是第三篇。 如果你是 Ansible 新手,我...
于是在上WC之际决定要改造一下编辑器.不过我一般动手之前会google一下,这样往往...
本文实例讲述了正则表达式教程之位置匹配。分享给大家供大家参考,具体如下: 注...