vue中实时显示时间

    //html代码只需要一个容器，自己设置样式即可
      <div>
           {{ date | formaDate }}
      </div>


    //下边是js代码
      var padaDate = function(value) {
          return value < 10 ? '0' + value : value;
      };
      filters: {
        //设置一个函数来进行过滤
        formaDate: function(value) {
            //创建一个时间日期对象
            var date = new Date();
            var year = date.getFullYear(); //存储年
            var month = padaDate(date.getMonth() + 1); //存储月份
            var day = padaDate(date.getDate()); //存储日期
            var hours = padaDate(date.getHours()); //存储时
            var minutes = padaDate(date.getMinutes()); //存储分
            var seconds = padaDate(date.getSeconds()); //存储秒
            //返回格式化后的日期
            return year + '年' + month + '月' + day + '日' + hours + ':' + minutes + ':' + seconds;
          }
       },
      created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
      },
    mounted() {
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000);
    },
    beforeDestroy: function() {
        //实例销毁前青出于定时器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }

以上就是vue中实时显示的所有代码，希望对你们有所帮助