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 相关文章推荐
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
vue动态设置页面title的方法实例
Aug 23 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
德劲1104的电路分析与改良
2021/03/01 无线电
实现PHP搜索加分页
2016/10/12 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
javascript 精粹笔记
2010/05/09 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
详解小白之KMP算法及python实现
2019/04/04 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
社区工作者演讲稿
2014/05/23 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python