淘先锋技术网

首页 1 2 3 4 5 6 7

vue数字循环可以很方便地实现数字在一段时间内的循环显示,是前端开发中常用的功能之一。下面给出一个简单的例子:


<template>
  <div>
    {{count}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

vue数字循环

在这个例子中,我们创建了一个名为count的变量用来存储数字,然后在mounted函数中使用setInterval函数每隔一秒将count加1,并在模板中将其显示出来。需要注意的是,使用setInterval函数时需要清除定时器,否则会导致内存泄漏。下面给出改进后的例子:


<template>
  <div>
    {{count}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.count++
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

在这个例子中,我们创建了一个名为timer的变量用来存储定时器,并在mounted函数中将其赋值为setInterval返回的值。然后,在beforeDestroy函数中清除定时器,以免造成内存泄漏。