在vue中使用setInterval的方法示例


Posted in Javascript onApril 16, 2019

昨天在用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>

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

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

Javascript 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
vue实现局部刷新的实现示例
Apr 16 #Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 #Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 #Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 #Javascript
详解滑动穿透(锁body)终极探索
Apr 16 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python循环实现n的全排列功能
2019/09/16 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
企业出纳岗位职责
2014/03/12 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
个人欠款担保书
2014/05/20 职场文书
购房意向书
2014/08/30 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
职工宿舍管理制度
2015/08/05 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python