vue,页面到计时的问题

倒计时

ajax请求接口,获取活动开始时间,在页面实现一个定时器效果

牵扯到倒计时的时候, 不要使用计算属性,计算属性无法手动修改。

解决方法: 在ajax请求成功之后, 对数据进行简单处理,计算出当期时间到活动开始时间的毫秒数, 然后使用自定义过滤器处理数据, 实现 hh:mm:ss 格式。在mounted钩子里写定时器。

注意: 在开发vue单页面应用时,由于定时器是属于window对象, 页面在跳转的时候, 定时器并不会被清除。可以添加beforeRouteLeave钩子清除定时器 。beforeDestroy 和 detroyed钩子要手动执行vm.$detroy()方法才会触发。

{
  ...
  beforeRouteLeave (to, form, next) {
    if (vm.timer) {
        window.clearInterval(vm.timer);
    }
    next();
  }
  ...
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容