这篇文章主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
比如v-for里面数据层次太多, 修改过数据变了,页面没有重新渲染,需手动强制刷新。
for(...){ ... } this.$forceUpdate();
补充知识:VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
页面展示:
实现效果:点击实现列表内容的展开、折叠。
代码:
增值税普通发票
增值税专用发票
企业名称:{{item.enterpriseName}}
税号:{{item.dutyParagraph}}
注册地址:{{item.address}}
联系电话:{{item.contactNumber}}
开户银行:{{item.accountOpeningBank}}
银行账号:{{item.bankAccount }}
v-for渲染出列表,在执行列表折叠展开时"clickZhuanMark" JS如下:
clickZhuanMark(val,event){ this.invoiceData[val].mark = !this.invoiceData[val].mark; },
可是实际并没有如设想的那样实现效果,之后修改代码:
添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。
以上这篇vue 里面的 $forceUpdate() 强制实例重新渲染操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持html中文网。
以上就是vue 里面的 $forceUpdate() 强制实例重新渲染操作的详细内容,更多请关注0133技术站其它相关文章!