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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
HTML上传控件取消选择
Mar 06 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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除数取整示例
2014/04/24 PHP
php实现word转html的方法
2016/01/22 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
js tab效果的实现代码
2009/12/26 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
理解javascript回调函数
2014/12/28 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python中类的创建和实例化操作示例
2019/02/27 Python
Python占用的内存优化教程
2019/07/28 Python
Python shelve模块实现解析
2019/08/28 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python 绘制场景热力图的示例
2020/09/23 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
毕业生找工作自荐书
2014/06/30 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js