解決vue的變量在settimeout內(nèi)部效果失效的問題
更新時間：2018年08月30日 09:49:43 作者：Tony3820
今天小編就為大家分享一篇解決vue的變量在settimeout內(nèi)部效果失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
解決方法如下：
1、定義一個self暫存this
2、再改變變量的值，則生效啦
var self=this;
this.toastrVal = inVal;
this.loadState = true;
this.noBg = bgState;
setTimeout(function () {
self.loadState = false;
}, 3000)
拓展知識：解決vue在setTimeout內(nèi)修改this失效的問題
當(dāng)在vue中使用定時器來修改一個變量值的時候，發(fā)現(xiàn)沒有效果，這是由于setTimeout函數(shù)調(diào)用的代碼運行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，這會使得this指向的是window對象。
要想setTimeout指向正確的值，可以使用如下方法：
1、使用箭頭函數(shù)
export default {
data () {
return {
left: -9999,
bottom: -9999
}
},
methods: {
cancelMask: function () {
setTimeout(() => {
this.bottom = 0;
this.left = 0;
}, 500);
}
}
}
此時函數(shù)的this指向的是定義它的時候的對象，也就是this指向了data內(nèi)中對應(yīng)的變量。
2、將當(dāng)前對象的this保存為一個變量
export default {
data () {
return {
left: -9999,
bottom: -9999
}
},
methods: {
cancelMask: function () {
var that = this;
setTimeout(function () {
that.bottom = 0;
that.left = 0;
}, 500);
}
}
}
方法中將this存在一個對象中，此時執(zhí)行setTimeout函數(shù)時，setTimeout函數(shù)內(nèi)的that就會訪問到這個變量，就會得到當(dāng)前對象。
以上這篇解決vue的變量在settimeout內(nèi)部效果失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
如何在Vue3中實現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實現(xiàn)自定義指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue實現(xiàn)商品詳情頁的評價列表功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Vue Echarts渲染數(shù)據(jù)導(dǎo)致殘留臟數(shù)據(jù)的問題處理
這篇文章主要介紹了Vue Echarts渲染數(shù)據(jù)導(dǎo)致殘留臟數(shù)據(jù)的問題處理,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
在vue中使用echarts實現(xiàn)飛機航線水滴圖詞云圖效果
這篇文章主要介紹了在vue中使用echarts實現(xiàn)飛機航線?水滴圖?詞云圖,通過引入中國地圖JS文件，會自動注冊地圖，文中結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue.js 利用v-for中的index值實現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來實現(xiàn)隔行變色,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解vuex commit保存數(shù)據(jù)技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05