1.在vue項(xiàng)目中的js代碼語法與之前使用js和jquery還是有所出入的，現(xiàn)遇到一個(gè)點(diǎn)擊按鈕出現(xiàn)倒計(jì)時(shí)30S的效果

相信大家對(duì)著兩個(gè)函數(shù)都陌生，就是一個(gè)定時(shí)器，setTimeOut只執(zhí)行一次，而setInterval會(huì)重復(fù)執(zhí)行

需要注意的是：在setInterval不用的時(shí)候一定要用clearSetInterval關(guān)閉定時(shí)器。

2.按照最原始的倒計(jì)時(shí)效果，實(shí)現(xiàn)如下：

//獲取30s 控制操作倒計(jì)時(shí) time(){ if(this.timeWait <= 0){ this.timeWait = 0; return; }else{ this.timeWait--; } setTimeout(function(){ this.time(); }, 1000) },

此處出現(xiàn)了錯(cuò)誤，報(bào)錯(cuò)信息為time未定義，此處對(duì)于定時(shí)器方法其實(shí)并沒有錯(cuò)

3.原因是 老生常談的javaScript 的this 的問題。

因?yàn)橛玫囊粋€(gè)

function(){

}

這里的 獨(dú)立的作用域 this指向了全局（這里是window）而且window里沒有time這個(gè)函數(shù)報(bào)了錯(cuò)。

4.用過vue的朋友應(yīng)該，基本vue中都是this.XXX這樣寫。這里的this是Vue對(duì)象。

所以為了使this正確指向vue，我用了ES6的尖頭函數(shù)。

setTimeout(() => { this.time();}, 1000)

尖頭函數(shù)因?yàn)樗奶厥庑裕膖his指向它外層的對(duì)象。

補(bǔ)充知識(shí)：Vue使用Element UI，校驗(yàn)不生效

vue中v-model=v-bind+v-on(@)

所以習(xí)慣使用v-model

今天使用Element UI 的el-form

發(fā)現(xiàn)el-input無論填什么值校驗(yàn)都過不了，百思不解

最后把v-model改為:model解決

然后看了下文檔，確實(shí)使用的是:model綁定

真是個(gè)弱智的問題

以上這篇vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。