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è)面訪問(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)文章
這篇文章主要介紹了Axios代理配置及封裝響應(yīng)攔截處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
有的時(shí)候項(xiàng)目需要在頁(yè)面使用快捷鍵，而且需要對(duì)快捷鍵進(jìn)行維護(hù)。本文將為大家展示Vue實(shí)現(xiàn)快捷鍵錄入功能的示例代碼，感興趣的可以了解一下2022-04-04
vue2.0+webpack環(huán)境的構(gòu)造過(guò)程
本文分步驟給大家介紹了vue2.0+webpack環(huán)境的構(gòu)造過(guò)程的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
這篇文章主要給大家介紹了關(guān)于Vue中xlsx的使用方法指南,有很多辦法都可以實(shí)現(xiàn),其中最簡(jiǎn)單的還是使用插件xlsx,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的區(qū)別是 Vue3 的路由實(shí)例化使用了 createApp() 方法,所以實(shí)例化路由時(shí)需要傳入根組件,這篇文章主要介紹了vue3使用vue-router嵌套路由(多級(jí)路由),需要的朋友可以參考下2023-12-12
解決Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題
這篇文章主要介紹了Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
Vue中實(shí)現(xiàn)動(dòng)態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項(xiàng)目中動(dòng)態(tài)更新 JSON 數(shù)據(jù),可以通過(guò)以下幾種方式實(shí)現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲(chǔ)在前端還是后端、是否需要持久化等,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-04-04
Vue3帶來(lái)了許多性能優(yōu)化和效率提升的特性，本文將重點(diǎn)討論Vue3在靜態(tài)提升、預(yù)字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進(jìn)，我們將通過(guò)對(duì)比Vue2和Vue3的編譯結(jié)果來(lái)說(shuō)明這些方面的效率提升2023-12-12
下面小編就為大家分享一篇vue.js項(xiàng)目打包上線的圖文教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下2022-08-08