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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
vue实现简单数据双向绑定
Apr 28 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转成EXE文件
2006/10/09 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jQuery 选择器详解
2015/01/19 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
javascript实现简单留言板案例
2021/02/09 Javascript
python类定义的讲解
2013/11/01 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python 容器总结整理
2017/04/04 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
优化Mysql查询的示例
2022/04/26 MySQL
vue中data里面的数据相互使用方式
2022/06/05 Vue.js