vue異步請求數(shù)據(jù)重新渲染方式
更新時間：2022年01月24日 10:44:30 作者：渣渣前端
這篇文章主要介紹了vue異步請求數(shù)據(jù)重新渲染方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue異步請求數(shù)據(jù)重新渲染
vue異步請求數(shù)據(jù)時往往不能及時更新，
下面介紹一種方法解決
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)})
? ? ? ? ? ? }
? ? ? ? }
? ? }這個時候template標簽里面的數(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="標題名稱"></myCard>
邏輯層
data(){
?? ?return {
?? ??? ??? ?countView:true
?? ??? ?}
?? ?}
//重新渲染組件
? ? ? ? _this.countView=false
? ? ? ? _this.$nextTick(()=>{
? ? ? ? ? ? _this.countView=true
? ? ? ? })以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了VUE實現(xiàn)注冊與登錄效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
詳解Vue的鉤子函數(shù)(路由導航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導航守衛(wèi)、keep-alive、生命周期鉤子),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了解決vue跨域axios異步通信問題，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章較詳細的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
vue+el-table點擊表頭實現(xiàn)改變其當前樣式
這篇文章主要介紹了vue+el-table點擊表頭實現(xiàn)改變其當前樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了使用Nuxt.js改造已有項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關于axios不能使用Vue.use()的相關資料，文中通過示例代碼介紹的非常詳細，對大家的理解和學習具有一定的參考學習價值，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
vue打包后dist目錄下的index.html網頁顯示空白的問題(兩種方案)
本文主要介紹了vue打包后dist目錄下的index.html網頁顯示空白的問題,主要介紹了兩種方式,具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue.js中如何導出Excel表格,在項目中經常會遇到這樣的需求，今天小編分步驟通過實例代碼給大家詳細介紹，需要的朋友可以參考下2019-06-06