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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Python中的super()方法使用简介
2015/08/14 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python购物车程序简单代码
2018/04/18 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
横空出世观后感
2015/06/09 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server