vue 实现三秒钟倒计时跳转页面

最新推荐文章于 2024-08-19 16:42:47 发布

原创最新推荐文章于 2024-08-19 16:42:47 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何使用JavaScript实现在Vue应用中创建一个动态计时器，从3秒开始倒数，当倒计时结束时自动跳转到/vaccineProtectionTk页面。通过设置定时器和条件判断来控制计数过程。

DOM节点： <span>{{count}}</span>
data() {
return{
count:''
}
},
created() {
    this.countDown() // 倒计时
  },
  methods: {
    countDown() {
      const TIME_COUNT = 3
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) { //限制倒计时区间
            this.count--
          } else {
            clearInterval(this.timer)   //删除定时器
            this.timer = null
            //跳转的页面写在此处
            this.$router.push('/vaccineProtectionTk')
          }
        }, 1000)
      }
    },
  },