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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python编写分类决策树的代码
2017/12/21 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
网络体系结构及协议的定义
2014/03/13 面试题
企业门卫岗位职责
2013/12/12 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
社区护士演讲稿
2014/08/27 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python