在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 相关文章推荐
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
Less 安装及基本用法
May 05 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
基于vue、react实现倒计时效果
Aug 26 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编写PDF文档生成器
2006/10/09 PHP
PHP脚本的10个技巧(6)
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
机器学习10大经典算法详解
2017/12/07 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
学习十八大标语
2014/10/09 职场文书
求职简历自我评价范文
2015/03/10 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
求职自我评价参考范文
2019/05/16 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers