Vue.js怎么样显示当前时间?

Vue.js怎么样显示当前时间?下面本篇文章给大家介绍一下Vue js实时显示当前时间的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Vue js实时显示当前时间的方法

下面我们通过示例来看看:

<!doctype html>
<html>
<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">
  <!-- 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>

效果图:

1.gif

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是Vue.js怎么样显示当前时间?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏