Vue中倒计时2秒跳转界面

template>
<div><div class="text"><span>加分成功</span></div><div class="integral"><span>12分</span></div><div class="num"><span>{{ count }}秒后跳转加分页面</span></div></div>
</template>
</template>

<script>
export default {data() {return {count: '' ”，// 倒计时}},created() {// 跳转选人加分页面this.goChoicePeople()},methods: {//2秒后跳转到选人加分界面goChoicePeople() {const TIME_COUNT = 2if (!this.timer) {this.count = TIME_COUNTthis.show = falsethis.timer = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) {this.count--} else {this.show = trueclearInterval(this.timer)this.timer = null// 跳转到选人加分界面this.$router.push('/home')}}, 1000)}}}
}
</script>

效果图：

Vue中倒计时2秒跳转界面相关推荐

vue中倒计时(日，时，分，秒)的计算和当前时间计时读秒
在了解倒计时原理之前先了解一些时间戳例如:12小时转换为时间戳 12✖️60✖️60✖️1000 第一个60单位分钟第二个60单位是秒第三个1000单位毫秒未来某天的倒计时 <!DOCT ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
vue中通过定时器设置倒计时，5秒倒计时
前言:有时候,在项目中,我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现. 一.设置div显示倒计时数字 <div class="countCircle">& ...
vue中实现60秒倒计时
vue中实现60秒倒计时 <span>{{count}} s</span> data中: data(){return{show: true,count: '',timer: n ...
在vue中制作倒计时功能
在vue中制作简单的倒计时倒计时的核心是通过递归来时实现定时器所以在方法中使用setTimeout 就行了 <script src="https://cdn.jsdelivr.n ...
【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...

Vue中倒计时2秒跳转界面

Vue中倒计时2秒跳转界面相关推荐

最新文章

热门文章