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 相关文章推荐
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php while循环控制的简单实例
2016/05/30 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
vue环形进度条组件实例应用
2018/10/10 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python创建模块及模块导入的方法
2015/05/27 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
pandas分区间,算频率的实例
2019/07/04 Python
django 类视图的使用方法详解
2019/07/24 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
经典c++面试题六
2012/01/18 面试题
小学学雷锋活动总结
2014/04/25 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript