在vue中使用setInterval的方法示例

2024-11-29 10:11:43

昨天在用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中使用 setTimeout() setInterval()函数的问题

在vue点击事件调用函数的过程中,想通过 setTimeout() setInterval()函数来延迟修改参数时,发现函数没有执行,控制台也没有报错,代码如下: var vm_target = new Vue({ el: '#vm_target', data: { clickSubmitBtn:false }, methods:{ myFunc:function(){ setTimeout(function(){ this.clickSubmitBtn = true; //此处修改data中的
在vue中使用setInterval的方法示例

昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题. 具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变data里面的数据,从而做到数据实时变化,这样方便与我来做数字翻页动画. 代码如下: <template> <div class="totel-number"> <div class="panel-top&quo
Vue中使用Teleport的方法示例

目录正文 Teleport 在 Vue 中的使用禁用 Teleport 标签正文通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中.但是,有时我们并不希望如此.一个很好的例子就是模态框——通常,模态框应该出现在页面上所有内容的顶部——所以如果我们在逻辑上在具体的组件中创建它,它可能会出现在某些 HTML 元素后面或需要一些奇怪的 CSS 样式让它达到顶部. 幸运的是,在 Vue 中有一种简单的方法可以解决这个问题,称为. 标签允许我们在组件中定义一些东西,然后在代
clipboard在vue中的使用的方法示例

简介页面中用 clipboard 可以进行复制粘贴,clipboard能将内容直接写入剪切板安装 npm install --save clipboard 使用方法一 <template> <span>{{ code }}</span> <i class="el-icon-document" title="点击复制" @click="copyActiveCode($event,code )"/>
在react中使用vue的状态管理的方法示例

我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r
Vue-cli3生成的Vue项目加载Mxgraph方法示例

使用Vue-cli3生成Vue项目,并等待项目创建成功. vue create [项目名] 安装mxgraph. cnpm install mxgraph --save 安装exports-loader. cnpm install exports-loader --save 安装script-loader. cnpm install script-loader --save 在项目根目录新建vue.config.js文件. 将以下内容复制到vue.config.js文件中. const path
vue编译器util工具使用方法示例

目录 makeMap源码: isReservedTag 源码: pluckModuleFunction 源码: isReserved 源码: makeMap源码: function makeMap(str, expectsLowerCase) { var map = Object.create(null); var list = str.split(','); for (var i = 0; i < list.length; i++) { map[list[i]] = true; } retur
Vue插槽slot全部使用方法示例解析

目录何为插槽示例解析插槽的基本使用具名插槽作用域插槽总结何为插槽我们都知道在父子组件间可以通过v-bind,v-model搭配props 的方式传递值,但是我们传递的值都是以一些数字,字符串为主,但是假如我们要传递一个div或者其他的dom元素甚至是组件,那v-bind和v-model搭配props的方式就行不通了,但是插槽(slot)可以,插槽可以传递dom元素,在子组件中通过接收使用父组件传递过来的dom元素,我的理解就是在定义一个组件时,有些dom是动态显示的,即子组件现在
Linux中在防火墙中开启80端口方法示例

linux如果刚安装好防火墙时我们常用的端口是没有增加的,也就是说不能访问,那么要怎么把常用端口增加到防火墙通过状态呢,下面我们以80端口为例子吧. 最近自己在学习Linux.搭建一个LNMP环境.在测试时一切都好.然后重启Linux后.再次访问网站无法打开.最终原因是在防火墙中没有加入 80 端口的规则.具体方法如下: 在CentOS下配置iptables防火墙,是非常必要的.来我们学习如何配置!,其它版本一下: 1.打开iptables的配置文件: 代码如下 vi /etc/sysconfi
在Vue中使用echarts的方法

上篇文章给大家介绍了在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入上面全局引入会将所有的echarts图表打包,导致体积过大,我
vue中使用cropperjs的方法

用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropperjs -save 在template里: <div id="demo">  <div class="container" v-show="panel">

在vue中使用setInterval的方法示例

相关推荐

随机推荐