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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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中JSON的应用技巧
2015/10/10 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP的自定义模板引擎
2017/03/24 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
大学生演讲稿范文
2014/01/11 职场文书
班组长岗位职责
2014/03/03 职场文书
入党自荐书范文
2014/03/09 职场文书
给全校老师的建议书
2014/03/13 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
Python装饰器的练习题
2021/11/23 Python