引用：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. Git 几个重要操作指令对比

    1.git merge 和 git rebase https://blog.csdn.net/wh_19910525/article/details/7554489 http://gitbook.li ...

  2. 【Linux】Linux 在线安装yum

    Linux如何安装软件? 一.RPM安装 优点: 安装过程很简单 缺点: 需要自己寻找和系统版本对应的RPM包 安装过程中需要解决包的依赖问题(例如tftp包) 二.yum在线安装 软件包仓库 仓库的 ...

  3. bit byte 字 字节 关系 简列

    字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte = 16bit) 1字节=8比特(1 byte = 8bit) 1比特=1位 一个字的字长为1 ...

  4. Java 创建 ARM 虚拟机磁盘类型选择的问题

    问题描述 在Azure 门户创建 ARM 虚拟机时,我们直接可以选择虚拟机的磁盘类型,但是在 Azure Management Libraries for Java 的 API 中我们无法找到直接设置 ...

  5. (EXPDP) Fails With Errors ORA-39079 ORA-25306 On One Node In RAC Environment

    分类: Oracle DataPump export on one certain RAC instance fails with errors: ORA-39006: internal errorO ...

  6. 如何从ERP将Material的Batch信息下载到CRM并存储在settype COMM_PR_BATCH里

    前提条件:必须先确保三个对象ATTRIBUTE, CLASS和OBJCL成功下载.可以到事物码R3AM1里查看,确保状态全部为Done. (1) 在事物码MM02里,切换到视图classificati ...

  7. Python变量和数据类型(入门2)

    转载请标明出处: http://www.cnblogs.com/why168888/p/6400809.html 本文出自:[Edwin博客园] Python变量和数据类型 一.整数 int = 20 ...

  8. WCF思考随笔一： WCF是干什么的？

    对于WCF,之前知道是微软新一代开发框架的重要组成部分,是从之前Socket,COM,COM+,.NET Remoting,WebService等等系统内或系统间通讯解决方案发展而来,同时对各种解决方 ...

  9. [转]JetBrains IntelliJ IDEA 13 Keygen (Java Source Code)

    转载:http://www.rover12421.com/2013/12/09/jetbrains-intellij-idea-13-keygen-java-source-code.html JetB ...

  10. Android（java）学习笔记51：ScrollView用法

    1. 理论部分 (1)ScrollView和HorizontalScrollView是为控件或者布局添加滚动条 (2)上述两个控件只能有一个孩子,但是它并不是传统意义上的容器 (3)上述两个控件可以互 ...