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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 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 获取全局变量的代码
2011/04/21 PHP
PHP基础知识介绍
2013/09/17 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
详解pandas赋值失败问题解决
2020/11/29 Python
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
女大学生自我鉴定
2013/12/09 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
经理助理岗位职责
2014/03/05 职场文书
学徒工职责
2014/03/06 职场文书
运动会宣传语
2015/07/13 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
golang 实用库gotable的具体使用
2021/07/01 Golang
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS