Vue中使用 setTimeout() setInterval()函數(shù)的問題
在vue點(diǎn)擊事件調(diào)用函數(shù)的過程中,想通過 setTimeout() setInterval()函數(shù)來延遲修改參數(shù)時(shí),發(fā)現(xiàn)函數(shù)沒有執(zhí)行,控制臺(tái)也沒有報(bào)錯(cuò),代碼如下:
var vm_target = new Vue({
el: '#vm_target',
data: {
clickSubmitBtn:false
},
methods:{
myFunc:function(){
setTimeout(function(){
this.clickSubmitBtn = true; //此處修改data中的參數(shù)時(shí)無效
},500);
}
}
})
之后在調(diào)試的時(shí)候,發(fā)現(xiàn),setTimeout()函數(shù)中的 this 指向的并非vue對象,將this.clickSubmitBtn = true; 修改為 vm_target.clickSubmitBtn = true;之后 ,代碼便可以正常執(zhí)行。
var vm_target = new Vue({
el: '#vm_target',
data: {
clickSubmitBtn:false
},
methods:{
myFunc:function(){
setTimeout(function(){
vm_target .clickSubmitBtn = true; //修改此處
},500);
}
}
})
補(bǔ)充:下面看下vue setTimeout--延遲操作
有時(shí)候我們在查詢后要做某些事情,例如我查詢的時(shí)候要根據(jù)某個(gè)值再去查詢某些東西并和這些值一起顯示的時(shí)候,我們可以對渲染數(shù)據(jù)的操作進(jìn)行延遲,因?yàn)榇a執(zhí)行的速度是很快的而訪問數(shù)據(jù)的操作先對于渲染的速度慢得多,所以往往數(shù)據(jù)還沒查詢到而數(shù)據(jù)就渲染完成了
setTimeout(() =>{
要延遲的代碼
},延遲時(shí)間);
總結(jié)
以上所述是小編給大家介紹的Vue中使用 setTimeout() setInterval()函數(shù)的問題 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- vue離開頁面時(shí)如何銷毀定時(shí)器
- vue如何設(shè)置定時(shí)器和清理定時(shí)器
- Vue如何優(yōu)雅的清除定時(shí)器
- Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問題
- VUE簡單的定時(shí)器實(shí)時(shí)刷新的實(shí)現(xiàn)方法
- VUE中setTimeout和setInterval自動(dòng)銷毀案例
- vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題
- Vue中使用定時(shí)器(setInterval、setTimeout)的兩種方式
相關(guān)文章
vue關(guān)于點(diǎn)擊詳情頁面keep-alive的緩存問題
這篇文章主要介紹了vue關(guān)于點(diǎn)擊詳情頁面keep-alive的緩存問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
ElementUI中利用table表格自定義表頭Tooltip文字提示
這篇文章主要介紹了ElementUI中利用table表格自定義表頭Tooltip文字提示,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
解決vue-cli + webpack 新建項(xiàng)目出錯(cuò)的問題
下面小編就為大家分享一篇解決vue-cli + webpack 新建項(xiàng)目出錯(cuò)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決
這篇文章主要介紹了Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
vue項(xiàng)目動(dòng)態(tài)設(shè)置頁面title及是否緩存頁面的問題
這篇文章主要介紹了vue項(xiàng)目動(dòng)態(tài)設(shè)置頁面title及是否緩存頁面的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題
這篇文章主要介紹了關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
vue多級(jí)復(fù)雜列表展開/折疊及全選/分組全選實(shí)現(xiàn)
這篇文章主要介紹了vue多級(jí)復(fù)雜列表展開/折疊及全選/分組全選實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx。非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-04-04

