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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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和ACCESS写聊天室(十)
2006/10/09 PHP
模仿OSO的论坛(二)
2006/10/09 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
python检测服务器是否正常
2014/02/16 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
详解django自定义中间件处理
2018/11/21 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Python基于locals返回作用域字典
2020/10/17 Python
Python通过format函数格式化显示值
2020/10/17 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
小学生自我评价范例
2013/09/24 职场文书
本科生就业推荐信
2014/05/19 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
万能检讨书2000字
2014/10/17 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android