vue mounted()函數(shù)中無(wú)法定義初始化樣式的原因分析
更新時(shí)間：2024年03月01日 09:21:06 作者：VIVI Xiao
這篇文章主要介紹了vue mounted()函數(shù)中無(wú)法定義初始化樣式的原因分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
mounted()函數(shù)中無(wú)法定義初始化樣式的原因
基于vue框架
在mounted()函數(shù)中，初始化某一個(gè)元素的css樣式，發(fā)現(xiàn)無(wú)法成功。
解決辦法
使用nextTick
this.$nextTick()函數(shù)作用是等頁(yè)面的數(shù)據(jù)更新完成以后，它再執(zhí)行內(nèi)部回調(diào)函數(shù)中的邏輯
參考如下：
<div> <span ref="red">我需要初始化顏色</span> </div>
new Vue({
el: '#app',
mounted: function () {
this.init()
},
methods: {
init() {
this.$nextTick(() => {
this.$refs.red.style.color = 'red'
})
}
}
})
mounted初始化的問(wèn)題
作為一個(gè) 希望從事后端多人 學(xué)習(xí)前端還是有點(diǎn)抽象
今天使用vue遇到一個(gè)問(wèn)題
mounted 不能初始化同步方法了
先看下配置信息
上圖
本地json文件(還需要防止中文空格)
頁(yè)面訪(fǎng)問(wèn)不到數(shù)據(jù)
改下代碼 看一下console
發(fā)現(xiàn)沒(méi)有讀取到數(shù)據(jù)，我的猜測(cè)是
mounted初始化沒(méi)等到this.$http.get().then()方法執(zhí)行完成 mounted初始化就執(zhí)行結(jié)束了.
試試 async 和 await 方式看看能不能解決
修改代碼
頁(yè)面顯示數(shù)據(jù)了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了rollup打包vue組件并發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題
這篇文章主要介紹了解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue如何在多個(gè)不同服務(wù)器下訪(fǎng)問(wèn)不同地址
這篇文章主要介紹了vue如何在多個(gè)不同服務(wù)器下訪(fǎng)問(wèn)不同地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見(jiàn)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue3中配置404路由及懶加載的解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue移動(dòng)端自適應(yīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本篇文章主要介紹了vue 實(shí)現(xiàn)全選全不選的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
手把手帶你封裝一個(gè)vue component第三方庫(kù)
這篇文章主要介紹了手把手帶你封裝一個(gè)vue component第三方庫(kù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue的$http的get請(qǐng)求要加上params操作
這篇文章主要介紹了vue的$http的get請(qǐng)求要加上params操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11