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