快捷導(dǎo)航

在vue中使用setInterval的方法示例

更新時間：2019年04月16日 11:12:19 作者：Wessonlu

這篇文章主要介紹了在vue中使用setInterval的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

昨天在用vue開發(fā)項目的時候遇到一個坑，在群友的探討中，成功的解決了這一問題。

具體情形如下：使用vue開發(fā)，在頁面中有一個人數(shù)統(tǒng)計組件，人數(shù)統(tǒng)計是要動態(tài)變化數(shù)據(jù)的，由于目前沒有真實數(shù)據(jù)，那么我想的是用隨機數(shù)和setInterval來改變data里面的數(shù)據(jù)，從而做到數(shù)據(jù)實時變化，這樣方便與我來做數(shù)字翻頁動畫。

代碼如下：

<template>
  <div class="totel-number">
    <div class="panel-top">
      <div class="panel-top_Left"></div>
      <div class="panel-top_Text flex-center" >數(shù)量</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() {
     //設(shè)置定時器，每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>

大家有發(fā)現(xiàn)問題嗎？

在beforeMount里面console.log(this.totelNumber)會發(fā)現(xiàn)數(shù)據(jù)是在變化的，但是頁面上是沒有任何變化。

這是什么原因呢？

方法：先把問題分解開，就懷疑的幾個點做正反的驗證

在多次驗證在多次驗證和查看文檔后強哥找到了：

需要注意的是有兩種情況不會觸發(fā)視圖更新，需要換種變通寫法：

- 當(dāng)你利用索引直接設(shè)置一個項時，例如： vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長度時，例如： vm.items.length = newLength

更具這個思路我就明白了為什么會有這樣的坑，然后就將代碼進(jìn)行了改進(jìn)：

<script>
import $ from 'jquery'
import * as d3 from 'd3';
export default {
  data(){
    return {
      totelNumber: new Array(8)
    }
  },
  beforeMount() {
     //設(shè)置定時器，每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>

如此一來就可將數(shù)據(jù)實時動態(tài)刷新呈現(xiàn)在頁面上。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: