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 18 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
JQuery基础语法小结
Feb 27 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
AngularJS指令用法详解
Nov 02 Javascript
JS高级运动实例分析
Dec 20 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 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
西德产收音机
2021/03/01 无线电
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
js闭包实例汇总
2014/11/09 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
深入理解Nodejs Global 模块
2017/06/03 NodeJs
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
促销活动计划书
2014/05/02 职场文书
英语邀请函范文
2015/02/02 职场文书
python处理json数据文件
2022/04/11 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js