在vue中使用setInterval的方法示例

 更新时间:2019年04月16日 11:12:19   作者:Wessonlu  
这篇文章主要介绍了在vue中使用setInterval的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题。

具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变data里面的数据,从而做到数据实时变化,这样方便与我来做数字翻页动画。

代码如下:

<template>
  <div class="totel-number">
    <div class="panel-top">
      <div class="panel-top_Left"></div>
      <div class="panel-top_Text flex-center" >数量</div>
      <div class="panel-top_Right"></div>
    </div>
    <div class="panel-body">
      <div class="counter-wrap">
        <ul class="counter-board">
          <li class="num-board" v-for="item in totelNumber">
            <span class="num u">
              <i class="w">{{item}}</i>
            </span>
            <span class="num b">
              <i class="w">{{item}}</i>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <i class="cc-Corner cc-C-t cc-C-l"></i>
    <i class="cc-Corner cc-C-t cc-C-r"></i>
    <i class="cc-Corner cc-C-b cc-C-r"></i>
    <i class="cc-Corner cc-C-b cc-C-l"></i>
  </div>
</template>
<script>
import $ from 'jquery'
import * as d3 from 'd3';
export default {
  data(){
    return {
      totelNumber: new Array(8)
    }
  },
  beforeMount() {
     //设置定时器,每3秒刷新一次
     var self = this;
     setInterval(getTotelNumber,1000)
     function getTotelNumber() {
       for(let i=0; i < self.totelNumber.length; i++){
         self.totelNumber[i] = Math.ceil(Math.random()*10) -1 
       }
     }
     getTotelNumber();   
  }
}
</script>

大家有发现问题吗?

在beforeMount里面console.log(this.totelNumber)会发现数据是在变化的,但是页面上是没有任何变化。

这是什么原因呢?

方法:先把问题分解开,就怀疑的几个点做正反的验证

在多次验证在多次验证和查看文档后强哥找到了:

需要注意的是有两种情况不会触发视图更新,需要换种变通写法:

- 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如: vm.items.length = newLength

更具这个思路我就明白了为什么会有这样的坑,然后就将代码进行了改进:

<script>
import $ from 'jquery'
import * as d3 from 'd3';
export default {
  data(){
    return {
      totelNumber: new Array(8)
    }
  },
  beforeMount() {
     //设置定时器,每3秒刷新一次
     var self = this;
     setInterval(getTotelNumber,1000)
     function getTotelNumber() {
       let newArray = new Array(8)
       for(let i=0; i < this.totelNumber.length; i++){
        newArray[i] = Math.ceil(Math.random()*10) -1
      }
      self.totelNumber = newArray
     }
     getTotelNumber();   
  }
}
</script>

如此一来就可将数据实时动态刷新呈现在页面上。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue开发runtime core中的虚拟节点示例详解

    vue开发runtime core中的虚拟节点示例详解

    这篇文章主要为大家介绍了vue开发runtime core中的虚拟节点示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue项目获取url中的参数(亲测可用)

    Vue项目获取url中的参数(亲测可用)

    这篇文章主要介绍了Vue项目获取url中的参数,本文通过两种情况分析给大家详细介绍,感兴趣的朋友一起看看吧
    2022-08-08
  • Vue自定义部分页面显示导航栏功能

    Vue自定义部分页面显示导航栏功能

    这篇文章主要介绍了Vue自定义部分页面显示导航栏,在设计导航栏的时候,考虑到登录之前不能浏览该网站,所以需要在登录页和注册页不能出现导航栏,登录后的页面才能出现导航栏,本文给大家解决这个问题,感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • until封装watch常用逻辑简化代码写法

    until封装watch常用逻辑简化代码写法

    这篇文章主要介绍了until将watch最常用的逻辑进行封装简化代码写法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue前端灵活改变后端地址两种方式

    vue前端灵活改变后端地址两种方式

    最近在学习或工作中遇到,把Vue前端项目打包后,要求可以再次修改请求后端接口的基础地址,下面这篇文章主要给大家介绍了关于vue前端灵活改变后端地址的两种方式,需要的朋友可以参考下
    2024-03-03
  • vue项目及axios请求获取数据方式

    vue项目及axios请求获取数据方式

    这篇文章主要介绍了vue项目及axios请求获取数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue $emit $refs子父组件间方法的调用实例

    Vue $emit $refs子父组件间方法的调用实例

    今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3中Cesium地图初始化及地图控件配置方法

    Vue3中Cesium地图初始化及地图控件配置方法

    本文中,我们主要介绍Cesium在Vue3运行环境的配置,及Cesium实例中控件的显隐设置,本项目基于pnpm安装,也可使用其他包管理器进行安装,如npm或yarn,本文通过示例代码对vue初始化Cesium地图相关知识介绍的非常详细,需要的朋友参考下吧
    2023-07-07
  • vue 自动生成swagger接口请求文件的方法

    vue 自动生成swagger接口请求文件的方法

    这篇文章主要介绍了vue 自动生成swagger接口请求文件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue2.0 $set()的正确使用详解

    Vue2.0 $set()的正确使用详解

    这篇文章主要介绍了Vue2.0 $set()的正确使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论