引用：https://www.jb51.net/article/143351.htm

这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于定时器进行实时更新的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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>www.jb51.net 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.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

【转载】vue.js实现格式化时间并每秒更新显示功能示例的更多相关文章

  1. javaFX 在窗口的标题栏显示当前时间，1秒更新一次时间

    例1:在窗口的标题栏显示当前时间,1秒更新一次时间 1 import java.text.DateFormat; 2 import java.text.SimpleDateFormat; 3 impo ...

  2. vue JS获取当前时间并格式化 （ 前端小细节，大进步 ）

    JS // 获取并且格式化时间     formatter (thistime, fmt) {       let $this = new Date(thistime)       let o = { ...

  3. [ 转载 ] vue.js面试题一

    转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...

  4. js　格式化时间

    //格式化时间 function time_format(time) { return new Date(parseInt(time) * 1000).toLocaleString().replace ...

  5. Vue.js用法详解（一）更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

  6. Vue页面上实时显示当前时间，每秒更新

    有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...

  7. vue 2.1.3 实时显示当前时间，每秒更新

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 【转载】Js获取当前日期时间及其它操作

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  9. js 中格式化时间

    在js中常常要求对时间的输出格式进行格式化,比如 2017-01-01 10:10,比较麻烦的是月,日,小时,分.它们的格式一般要求两位,如果小于10的话需要在前边补0,当然这算不上什么问题,可以通过 ...

随机推荐

  1. 签名&加密的区别

    https://www.zhihu.com/question/27669212/answer/38037256 就拿A给B发送经过签名加密信息来说: 1.A对信息签名的作用是确认这个信息是A发出的,不 ...

  2. Linux--DHCP搭建

    服务功能:为局域网中的主机自动分配IP地址.子网掩码.广播地址.默认网关地址.DNS服务器地址 1.安装DHCP服务器软件 [root@localhost Packages]# rpm -ivh dh ...

  3. diskpart分区

    分区知识充电: 主分区:主分区,也称为主磁盘分区,和拓展分区.逻辑分区一样,是一种分区类型.主分区中不能再划分其他类型的分区,因此每个主分区都相当于一个逻辑磁(在这一点上主分区和逻辑分区很相似,但主分 ...

  4. BZOJ1123:[POI2008]BLO(双连通分量)

    Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n&l ...

  5. PHP设计模式——工厂模式

    <?php /** * 工厂模式 * 提供获取某个对象的新实例的一个接口,同时使调用代码避免确定实际实例化基类的步骤. * * 工厂类用于创建不同类的实例,并将其返回. */ /** * 服务端 ...

  6. 2018.10.3 MianShiBaoDian JavaWeb后端部分

    MSBD 四.JavaWeb后端部分 1.Tomcat的优化经验 去掉对web.xml的监控,吧jsp提前编写成servlet,由于物理内存的情况,加大Tomcat使用的jvm的内存 2.HTTP请求 ...

  7. VI编辑器查找替换

    1.Vi下进行查找 VI命令模式下:输入“/要查找的词”回车就会进入查找,你可以按“n”查找下一个,按“N”查找上一个.类似查找命令“?”与“/”的区别是“/”为向下查找,“?”为向上查找. 2.Vi ...

  8. 【luogu P1993 小K的农场】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1993 1.差分约束: 对于a - b <= c 有一条 b-->a 权值为c 对于a - b & ...

  9. 【luogu P4137 Rmq Problem / mex】 题解

    题目链接:https://www.luogu.org/problemnew/show/P4137 求区间内最大没出现过的自然数 在add时要先判断会不会对当前答案产生影响,如果有就去找下一个答案. # ...

  10. 提高mapreduce性能的七点建议

    Cloudera提供给客户的服务内容之一就是调整和优化MapReduce job执行性能.MapReduce和HDFS组成一个复杂的分布式系统,并且它们运行着各式各样用户的代码,这样导致没有一个快速有 ...