引用：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. 使用 Python 设置数据的路径

    使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...

  2. 解决Tensorflow源码安装的之后TensorBoard 无法使用的问题

    作者  cnblog 修雨轩陈 我是按照 Tensorflow 下 https://github.com/tensorflow/tensorflow/blob/master/tensorflow/g3 ...

  3. 【Linux】Linux 找回Root用户密码

    Root密码破解 Linux 忘记Root密码 ? 技术学习基本原则:不作恶 一.破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单按e进入编辑模式 3.编辑kernel那行添加/ ...

  4. dpkg 打包root权限app

    dpkg 安装Macports 下载对应系统的Macports安装时间会比较久,安装完毕后放在了/opt/local/bin 目录下 安装dpkg 打开终端,输入 sudo port -f insta ...

  5. python 初识

    一.Python介绍 Python简介 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  6. ACCESS模糊查询注意事项

    ACCESS模糊查询出现的问题,开发中需要注意!在SQL Server中模糊查询通常是这样的Select * from articleTable where authorName like '%jac ...

  7. pdf2swf 转换时报错。This file is too complex to render- SWF only supports 65536 shapes at once

    在使用swftools转换pdf 到swf的时候报错,有如下说明:if the pdf contains too many images / shapes, pdf2swf will fail wit ...

  8. oracle_How to Recover Data (Without a Backup!）

    How to Recover Data (Without a Backup!) It's the classic career-limiting maneuver(职业限制机动): accidenta ...

  9. oracle_set_autocommit

    preface 1.centos  operating  system. 2.database is oracle 11g. 3.oracle account  is  scott. step 1.e ...

  10. OA环境搭建及卸载操作帮助文档

    目    录 项目介绍 JDK的安装与验证 1.安装JDK 2.添加环境变量 3.验证JDK MySql的安装与验 1.安装MySql 2.登录Mysql帐号 3.导入数据库 Tomcat的安装与验证 ...