vue異步請(qǐng)求數(shù)據(jù)重新渲染方式
更新時(shí)間：2022年01月24日 10:44:30 作者：渣渣前端
這篇文章主要介紹了vue異步請(qǐng)求數(shù)據(jù)重新渲染方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue異步請(qǐng)求數(shù)據(jù)重新渲染
vue異步請(qǐng)求數(shù)據(jù)時(shí)往往不能及時(shí)更新，
下面介紹一種方法解決
export default {
? ? ? ? name: "pic",
? ? ? ? created() {
? ? ? ? ? ?this.getList();
? ? ? ? },
? ? ? ? data(){
? ? ? ? ? ? return{num:[]}
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? getList(){
? ? ? ? ? ? ? ? fetch('https://localhost：3000/get-banner-list').then(data=>{
? ? ? ? ? ? ? ? ? ? return data.json()
? ? ? ? ? ? ? ? }).then((data)=>{this.num=data.data;console.log(this.num)})
? ? ? ? ? ? }
? ? ? ? }
? ? }這個(gè)時(shí)候template標(biāo)簽里面的數(shù)據(jù)還沒有更新，所以可以這樣
<div class="propagate" v-show="num.length>0"> ? ? ? ? <ul> ? ? ? ? ? ?<li ?v-for="(item,index) in num" :key="index"> ? ? ? ? ? ? ? <img :src="item.photo_url" :key="index"> ? ? ? ? ? ?</li> ? ? ? ? </ul> ? ? </div>
等數(shù)據(jù)加載完再顯示
自定義組件異步獲取數(shù)據(jù)重新渲染
視圖層
<myCard v-if="countView" icon="icon-yonghuzu" bgcolor="#2d8cf0" :count="homeData.govtCount" title="標(biāo)題名稱"></myCard>
邏輯層
data(){
?? ?return {
?? ??? ??? ?countView:true
?? ??? ?}
?? ?}
//重新渲染組件
? ? ? ? _this.countView=false
? ? ? ? _this.$nextTick(()=>{
? ? ? ? ? ? _this.countView=true
? ? ? ? })以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能
這篇文章主要為大家詳細(xì)介紹了使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
這篇文章主要為大家詳細(xì)介紹了vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
我們對(duì)Vue中data數(shù)據(jù)的修改會(huì)導(dǎo)致界面對(duì)應(yīng)的響應(yīng)變化，而通過nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來可能還是有點(diǎn)夢(mèng)幻，下面我們直接使用nextTick體驗(yàn)一下效果2022-08-08
vue引入子組件命名不規(guī)范錯(cuò)誤的解決方案
這篇文章主要介紹了vue引入子組件命名不規(guī)范錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能示例
這篇文章主要介紹了vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能,結(jié)合實(shí)例形式分析了vue.js中組件的定義、全局組件、局部組件、配合模板組件及動(dòng)態(tài)組件的相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
使用Vue3和Plotly.js繪制動(dòng)態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動(dòng)態(tài)加載到圖表中并進(jìn)行實(shí)時(shí)更新,本文將展示如何使用Plotly.js和Vue.js實(shí)現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
Vuex中的getter和mutation的區(qū)別詳解
在現(xiàn)代前端開發(fā)中,狀態(tài)管理是一個(gè)不可忽視的話題,而Vuex作為Vue.js的官方狀態(tài)管理庫(kù),在大型應(yīng)用中扮演著至關(guān)重要的角色,當(dāng)我們使用Vuex進(jìn)行狀態(tài)管理時(shí),getter和mutation是兩個(gè)重要的概念,在本文中,我們將詳細(xì)探討getter和mutation的區(qū)別,需要的朋友可以參考下2024-12-12
淺談Vue2.0中v-for迭代語(yǔ)法的變化(key、index)
下面小編就為大家分享一篇淺談Vue2.0中v-for迭代語(yǔ)法的變化(key、index)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家匯總介紹了Vue中fragment.js使用方法的相關(guān)資料,需要的朋友可以參考下2020-02-02