vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作
迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
比如v-for里面數(shù)據(jù)層次太多， 修改過(guò)數(shù)據(jù)變了，頁(yè)面沒(méi)有重新渲染，需手動(dòng)強(qiáng)制刷新。
for(...){
...
}
this.$forceUpdate();
補(bǔ)充知識(shí)：VUE項(xiàng)目中使用this.$forceUpdate();解決頁(yè)面v-for中修改item屬性值后頁(yè)面v-if不改變的問(wèn)題
頁(yè)面展示：
實(shí)現(xiàn)效果：點(diǎn)擊實(shí)現(xiàn)列表內(nèi)容的展開(kā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>開(kāi)戶銀行：</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í)行列表折疊展開(kāi)時(shí)"clickZhuanMark" JS如下：
clickZhuanMark(val,event){
this.invoiceData[val].mark = !this.invoiceData[val].mark;
},
可是實(shí)際并沒(méi)有如設(shè)想的那樣實(shí)現(xiàn)效果，之后修改代碼：
添加this.$forceUpdate();進(jìn)行強(qiáng)制渲染，效果實(shí)現(xiàn)。搜索資料得出結(jié)果：因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒(méi)有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新。
以上這篇vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用element ui的彈窗與echarts之間的問(wèn)題詳解
這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本文主要介紹了Vuex?localStorage的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡
放大鏡在很多地方都可以使用的到，本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
在Vue項(xiàng)目中導(dǎo)出Excel表格是常見(jiàn)的功能,特別是在后臺(tái)管理系統(tǒng)中,為了方便用戶將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的相關(guān)資料,需要的朋友可以參考下2024-06-06
如果在面試中，面試官問(wèn)你Vue組件之間有哪些數(shù)據(jù)通信方式，你會(huì)怎么回復(fù)，不要擔(dān)心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來(lái)吧2023-06-06
vue3原始值響應(yīng)方案及響應(yīng)丟失問(wèn)題解讀
這篇文章主要介紹了vue3原始值響應(yīng)方案及響應(yīng)丟失問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng)的代碼示例
在Vue.js應(yīng)用開(kāi)發(fā)中,列表數(shù)據(jù)的聯(lián)動(dòng)是一個(gè)常見(jiàn)的需求,這種聯(lián)動(dòng)可以用于多種場(chǎng)景,例如過(guò)濾篩選、關(guān)聯(lián)選擇等,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng),并通過(guò)多個(gè)具體的代碼示例來(lái)幫助讀者理解其實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2024-10-10
下面小編就為大家分享一篇vue判斷input輸入內(nèi)容全是空格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在Vue中使用Viser說(shuō)明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說(shuō)明(基于AntV-G2可視化引擎)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10