快捷導(dǎo)航

在vue中使用setInterval的方法示例

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

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

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

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

代碼如下：

<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è)置定時(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)會(huì)發(fā)現(xiàn)數(shù)據(jù)是在變化的，但是頁面上是沒有任何變化。

這是什么原因呢？

方法：先把問題分解開，就懷疑的幾個(gè)點(diǎn)做正反的驗(yàn)證

在多次驗(yàn)證在多次驗(yàn)證和查看文檔后強(qiáng)哥找到了：

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

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

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

<script>
import $ from 'jquery'
import * as d3 from 'd3';
export default {
  data(){
    return {
      totelNumber: new Array(8)
    }
  },
  beforeMount() {
     //設(shè)置定時(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ù)實(shí)時(shí)動(dòng)態(tài)刷新呈現(xiàn)在頁面上。

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

您可能感興趣的文章: