您好,登錄后才能下訂單哦!
setInterval怎么在vue中使用?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
代碼如下:
<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>
關(guān)于setInterval怎么在vue中使用問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。