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阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 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 编程安全性小结
2010/01/08 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python写一个md5解密器示例
2018/02/23 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
办公室主任岗位职责
2013/11/08 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2016年春节慰问信息
2015/03/25 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Javascript webpack动态import
2022/04/19 Javascript