vue实现几秒后跳转新页面代码


Posted in Javascript onSeptember 09, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
  <div @click="clickJump()">提交</div>
</template>
<script>
export default {
  data(){
    return {
      count:"",//倒计时
    }
  }
}, 
mounted(){  
},
 
methods: {
 //几秒后进入跳转页面
  clickJump(){
    const timejump = 1;
    if(!this.timer){
      this.count = timejump ;
      this.show = false;
      this.timer = setInterval(()=>{
      if(this.count > 0 && this.count <= timejump ){
        this.count--;
      }else{
        this.show = true;
        clearInterval(this.timer);
        this.timer = null;
        //跳转的页面写在此处
        this.$router.push({path: '/address'});
      }
     },100)
    }
  },
}
</script>

补充知识:vue设置延时

一定要创建一个timer,然后调用延时之前先清除timer的延时

clearTimeout(this.timer); //清除延迟执行 
 
this.timer = setTimeout(()=>{  //设置延迟执行
  console.log('ok');
},1000);

以上这篇vue实现几秒后跳转新页面代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
angular2+node.js express打包部署的实战
Jul 27 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
vue中template的三种写法示例
Oct 21 Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
JavaScript代码简化技巧实例解析
Sep 09 #Javascript
vue 手机物理监听键+退出提示代码
Sep 09 #Javascript
You might like
PHP使用静态方法的几个注意事项
2014/09/16 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
简单JS代码压缩器
2006/10/12 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
vue实现放大镜效果
2020/09/17 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
python 系统调用的实例详解
2017/07/11 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python实现简易版计算器
2020/06/22 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
读书之星事迹材料
2014/05/12 职场文书
具结保证书
2015/01/17 职场文书
检讨书大全
2015/01/27 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
各种货币符号快捷输入
2022/02/17 杂记