vue.js实现格式化时间并每秒更新显示功能示例


Posted in Javascript onJuly 07, 2018

本文实例讲述了vue.js实现格式化时间并每秒更新显示功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>3water.com vue格式化时间</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!--# vue.js支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤,经常用于格式化文本,比如字母全部大写,货币千位使用逗号分隔等。过滤的规则是自定义的,通过给vue实例添加选项filters来设置,例如对显示时间的格式化处理 #-->
  {{ date | formatDate }}
</div>
</body>
</html>
<script>
  var myData = {
    date:new Date()
  };
  //在月份、日期、小时等小于10前面补0
  var padDate = function (value) {
    return value <10 ? '0' + value:value;
  };
  var app = new Vue({
    el:'#app',
    data:myData,
    filters: {
      formatDate:function (value) {
        var date = new Date(value);
        var year = date.getFullYear();
        var month = padDate(date.getMonth()+1);
        var day = padDate(date.getDate());
        var hours = padDate(date.getHours());
        var minutes = padDate(date.getMinutes());
        var seconds = padDate(date.getSeconds());
        return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
      }
    },
    //实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用。需要初始化处理一些数据时会比较有用
    created:function () {
     },
    //el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始
    mounted:function () {
      var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
      this.timer = setInterval(function(){
        _this.date = new Date(); //修改数据date
      },1000)
    },
    //实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等
    beforeDestroy:function(){
      if(this.timer){
        clearInterval(this.timer); //在Vue实例销毁前,清除我们的定时器
      }
    }
  })
</script>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js实现格式化时间并每秒更新显示功能示例

Javascript 相关文章推荐
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JavaScript数组push方法使用注意事项
Oct 30 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 #Javascript
react-native动态切换tab组件的方法
Jul 07 #Javascript
vue.js 实现点击展开收起动画效果
Jul 07 #Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 #Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 #Javascript
小程序实现发表评论功能
Jul 06 #Javascript
vue中倒计时组件的实例代码
Jul 06 #Javascript
You might like
PHP SEO优化之URL优化方法
2011/04/21 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
详解js的六大数据类型
2016/12/27 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
英语商务邀请函范文
2014/01/16 职场文书
学校安全工作制度
2014/01/19 职场文书
老公保证书范文
2014/04/29 职场文书
优秀教师个人材料
2014/12/15 职场文书
开工典礼致辞
2015/07/29 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript