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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
Jquery注册事件实现方法
May 18 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
Three.js快速入门教程
Sep 09 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 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系列学习之日期函数使用介绍
2012/08/18 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP中each与list用法分析
2016/01/08 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
js实现简单页面全屏
2019/09/17 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
Python 学习笔记
2008/12/27 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python使用7z解压apk包的方法
2015/04/18 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
人口与计划生育目标管理责任书
2014/07/29 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
高中开学感言
2015/08/01 职场文书