引用：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. 05_Jedis操作Redis

    [工程截图] [String类型操作] package com.higgin.string; import java.util.List; import redis.clients.jedis.Jed ...

  2. Android自定义验证码输入框

    未经允许,禁止

  3. android 自定义

    初级: 1.Android自定义View之一:初探实例 ——> onDraw 2.getwidth和getmeasuredwidth的区别以及两者的使用场景 3.Android 自定义View ...

  4. dialog和dialogFragment的使用及常用问题

    今天比较懒,只是列举了一些网址 弹窗之一:dialogFragment的使用 https://blog.csdn.net/sinat_31057219/article/details/76979246 ...

  5. Recsys2018 music recomendation

    http://www.recsyschallenge.com/2018/ January 2018 Release of the "One Million Playlists" d ...

  6. matlab练习程序（广度优先搜索BFS、深度优先搜索DFS）

    如此经典的算法竟一直没有单独的实现过,真是遗憾啊. 广度优先搜索在过去实现的二值图像连通区域标记和prim最小生成树算法时已经无意识的用到了,深度优先搜索倒是没用过. 这次单独的将两个算法实现出来,因 ...

  7. ZooKeeper 典型应用场景-Master选举

    master选举 1.使用场景及结构 现在很多时候我们的服务需要7*24小时工作,假如一台机器挂了,我们希望能有其它机器顶替它继续工作.此类问题现在多采用master-salve模式,也就是常说的主从 ...

  8. HTTPS科普（转）

    为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...

  9. CDS view注解解析 - @Environment.systemField

    下面的CDS view使用到了@Environment.systemField这个注解,定义了两个参数#SYSTEM_LANGUAGE和#USER. 这个view从CRM物料主数据的产品抬头表COMM ...

  10. OC 内存管理（retain和release）

    内存管理 retain和release简单使用 #import "Student.h" @implementation Student @synthesize age = _age ...