vue 里面的 $forceUpdate() 強制實例重新渲染操作
迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件,而不是所有子組件。
比如v-for里面數(shù)據(jù)層次太多, 修改過數(shù)據(jù)變了,頁面沒有重新渲染,需手動強制刷新。
for(...){
...
}
this.$forceUpdate();
補充知識:VUE項目中使用this.$forceUpdate();解決頁面v-for中修改item屬性值后頁面v-if不改變的問題
頁面展示:

實現(xiàn)效果:點擊實現(xiàn)列表內(nèi)容的展開、折疊。
代碼:
<div class="invoice-list" v-for="(item,index) in invoiceData" :key="index">
<div class="images"><img src="../../../../../static/images/invoice_pu.png" v-if="item.invoiceType == '0'"><img src="../../../../../static/images/invoice_zhuan.png" v-else-if="item.invoiceType == '1'"></div>
<div class="text">
<h3 v-if="item.invoiceType == '0'">增值稅普通發(fā)票</h3>
<h3 v-else-if="item.invoiceType == '1'">增值稅專用發(fā)票</h3>
<p><span>企業(yè)名稱:</span>{{item.enterpriseName}}</p>
<p><span>稅號:</span>{{item.dutyParagraph}}</p>
<transition name="fade">
<div class="zhuanInfo" v-if="item.mark == true">
<p><span>注冊地址:</span>{{item.address}}</p>
<p><span>聯(lián)系電話:</span>{{item.contactNumber}}</p>
<p><span>開戶銀行:</span>{{item.accountOpeningBank}}</p>
<p><span>銀行賬號:</span>{{item.bankAccount }}</p>
</div>
</transition>
<div class="zhuanMark" v-if="item.invoiceType == '1'">
<p class="hideMark">
<img src="../../../../../static/images/arrow_bottom.png" v-if="item.mark == false" @click="clickZhuanMark(index,$event)">
<img src="../../../../../static/images/arrow_top.png" v-else @click="clickZhuanMark(index,$event)">
</p>
</div>
<div class="list-radio"><input type="radio" value="" name="selectContact" @change="getInvoiceId(item.invoiceId)" /></div>
</div>
</div>
v-for渲染出列表,在執(zhí)行列表折疊展開時"clickZhuanMark" JS如下:
clickZhuanMark(val,event){
this.invoiceData[val].mark = !this.invoiceData[val].mark;
},
可是實際并沒有如設(shè)想的那樣實現(xiàn)效果,之后修改代碼:

添加this.$forceUpdate();進行強制渲染,效果實現(xiàn)。搜索資料得出結(jié)果:因為數(shù)據(jù)層次太多,render函數(shù)沒有自動更新,需手動強制刷新。
以上這篇vue 里面的 $forceUpdate() 強制實例重新渲染操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實現(xiàn)仿原生ios時間選擇組件實例代碼
本篇文章主要介紹了vue.js實現(xiàn)仿原生ios時間選擇組件實例代碼,具有一定的參考價值,有興趣的可以了解一下。2016-12-12
uniapp組件uni-file-picker中對上傳的圖片進行壓縮至1兆以內(nèi)(推薦)
我在做uniapp項目時,用的uni-file-picker組件,這是我做的一個項目實例,主要是將圖片通過接口傳至后臺服務(wù)器,本文給大家分享uniapp組件uni-file-picker中對上傳的圖片進行壓縮再上傳,感興趣的朋友跟隨小編一起看看吧2022-11-11
vue項目完成后如何實現(xiàn)項目優(yōu)化的示例
本文主要介紹了vue項目完成后如何實現(xiàn)項目優(yōu)化的示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12
vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖
這篇文章主要介紹了vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決
這篇文章主要介紹了為vue中的data賦值computed計算屬性后,出現(xiàn)undefined原因及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07

