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实现一些常用软件的下载导航
Aug 03 Javascript
js单例模式详解实例
Nov 21 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
简单实现python数独游戏
2018/03/30 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
如何用Django处理gzip数据流
2021/01/29 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
人力资源专业推荐信
2013/11/29 职场文书
如何写自我鉴定
2014/03/19 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python