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 类
Nov 07 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
vue实现微信分享功能
Nov 28 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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 zip扩展Linux下安装过程分享
2014/05/05 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
电信营业员自我评价分享
2014/01/17 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
运动会口号大全
2014/06/07 职场文书
新店开张活动方案
2014/08/24 职场文书
如何用python反转图片,视频
2021/04/24 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
JS实现简单九宫格抽奖
2022/06/28 Javascript