vue中格式化时间过滤器代码实例


Posted in Javascript onApril 17, 2019

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>
 {{ message | formatTime('YMD')}}
</div>
<div>
{{ message | formatTime('YMDHMS')}}
</div>
   <div>
    {{ message | formatTime('HMS')}}
   </div>
    <div>
    {{ message | formatTime('YM')}}
   </div>
    </div>
<script>
//元素的补零计算
function addZero(val){
 if(val < 10){
  return "0" +val;
 }else{
  return val;
 }
};


console.log(addZero(9))


//实现vue中的过滤器功能  先定义过滤器 在使用        value是过滤器前面的值,type是过滤器中定义的字段
Vue.filter("formatTime",function(value,type){
var dataTime="";
var data = new Date();  
             data.setTime(value); 
     var year   =  data.getFullYear();  
             var month  =  addZero(data.getMonth() + 1);  
             var day    =  addZero(data.getDate()); 
             var hour   =  addZero(data.getHours());
var minute =  addZero(data.getMinutes());
var second =  addZero(data.getSeconds());
if(type == "YMD"){
dataTime =  year + "-"+ month + "-" + day;
}else if(type == "YMDHMS"){
dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second;
}else if(type == "HMS"){
dataTime = hour+":" + minute+":" + second;
}else if(type == "YM"){
dataTime = year + "-" + month;

}
return dataTime;//将格式化后的字符串输出到前端显示
});


var app = new Vue({
 el: '#app',
 data: {
   message: '1501068985877'
 }
         });
</script>
</body>
</html>

以上所述是小编给大家介绍的vue格式化时间过滤器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
PassWord输入框代码分享
Jun 07 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 #Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 #Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 #Javascript
详解js获取video任意时间的画面截图
Apr 17 #Javascript
解决vue跨域axios异步通信问题
Apr 17 #Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 #Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
python 网络编程常用代码段
2016/08/28 Python
python 实现倒排索引的方法
2018/12/25 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python实现大量图片重命名
2020/03/23 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
质检部部长职责
2013/12/16 职场文书
求职简历自我评价范例
2014/03/12 职场文书
奠基仪式策划方案
2014/05/15 职场文书
军训口号
2014/06/13 职场文书
团日活动总结模板
2014/06/25 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
中国合伙人观后感
2015/06/02 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
环保建议书作文300字
2015/09/14 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS