vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作
迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
比如v-for里面數(shù)據(jù)層次太多， 修改過數(shù)據(jù)變了，頁面沒有重新渲染，需手動(dòng)強(qiáng)制刷新。
for(...){
...
}
this.$forceUpdate();
補(bǔ)充知識(shí)：VUE項(xiàng)目中使用this.$forceUpdate();解決頁面v-for中修改item屬性值后頁面v-if不改變的問題
頁面展示：
實(shí)現(xiàn)效果：點(diǎn)擊實(shí)現(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>稅號(hào)：</span>{{item.dutyParagraph}}</p>
<transition name="fade">
<div class="zhuanInfo" v-if="item.mark == true">
<p><span>注冊(cè)地址：</span>{{item.address}}</p>
<p><span>聯(lián)系電話：</span>{{item.contactNumber}}</p>
<p><span>開戶銀行：</span>{{item.accountOpeningBank}}</p>
<p><span>銀行賬號(hào)：</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í)行列表折疊展開時(shí)"clickZhuanMark" JS如下：
clickZhuanMark(val,event){
this.invoiceData[val].mark = !this.invoiceData[val].mark;
},
可是實(shí)際并沒有如設(shè)想的那樣實(shí)現(xiàn)效果，之后修改代碼：
添加this.$forceUpdate();進(jìn)行強(qiáng)制渲染，效果實(shí)現(xiàn)。搜索資料得出結(jié)果：因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新。
以上這篇vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue在原窗口與新窗口打開外部鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼
本篇文章主要介紹了vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
uniapp組件uni-file-picker中對(duì)上傳的圖片進(jìn)行壓縮至1兆以內(nèi)(推薦)
我在做uniapp項(xiàng)目時(shí)，用的uni-file-picker組件，這是我做的一個(gè)項(xiàng)目實(shí)例，主要是將圖片通過接口傳至后臺(tái)服務(wù)器，本文給大家分享uniapp組件uni-file-picker中對(duì)上傳的圖片進(jìn)行壓縮再上傳，感興趣的朋友跟隨小編一起看看吧2022-11-11
在使用token進(jìn)行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗(yàn)肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下2023-02-02
Vue如何獲取url路由地址和參數(shù)簡(jiǎn)單示例
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過簡(jiǎn)單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue通過ref獲取dom元素屬性的方法,文中有詳細(xì)的方法介紹,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例
本文主要介紹了vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目?jī)?yōu)化的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D
這篇文章主要介紹了vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
為vue中的data賦值computed計(jì)算屬性后,出現(xiàn)undefined原因及解決
這篇文章主要介紹了為vue中的data賦值computed計(jì)算屬性后,出現(xiàn)undefined原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
MVVM模型主要是為了分離視圖(View)和模型(Model)，其優(yōu)點(diǎn)為：低耦合、可重用性、獨(dú)立開發(fā)以及可測(cè)試，視圖和模型分離的特點(diǎn)給了 Vue 很大的啟發(fā)，這篇文章主要介紹了MVVM模型在Vue中的使用,需要的朋友可以參考下2022-11-11