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 Autocomplete自动完成插件
Jul 17 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 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
再说下636单管机
2021/03/02 无线电
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Numpy的简单用法小结
2019/08/28 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
优秀医生事迹材料
2014/02/12 职场文书
应届大专生自荐书
2014/06/16 职场文书
学校工作推荐信范文
2014/07/11 职场文书
争先创优演讲稿
2014/09/15 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
Golang 结构体数据集合
2022/04/22 Golang