vue 里面的 $forceUpdate() 强制实例重新渲染操作


Posted in Javascript onSeptember 21, 2020

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

比如v-for里面数据层次太多, 修改过数据变了,页面没有重新渲染,需手动强制刷新。

for(...){
 ...
}
this.$forceUpdate();

补充知识:VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

页面展示:

vue 里面的 $forceUpdate() 强制实例重新渲染操作

实现效果:点击实现列表内容的展开、折叠。

代码:

<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'">增值税普通发票</h3>
  <h3 v-else-if="item.invoiceType == '1'">增值税专用发票</h3>
  <p><span>企业名称:</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>联系电话:</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渲染出列表,在执行列表折叠展开时"clickZhuanMark" JS如下:

clickZhuanMark(val,event){
 this.invoiceData[val].mark = !this.invoiceData[val].mark;
 
},

可是实际并没有如设想的那样实现效果,之后修改代码:

vue 里面的 $forceUpdate() 强制实例重新渲染操作

添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

以上这篇vue 里面的 $forceUpdate() 强制实例重新渲染操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
微信小程序实现单选功能
Oct 30 Javascript
vue组件入门知识全梳理
Sep 21 #Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 #Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 #Javascript
vue操作dom元素的3种方法示例
Sep 20 #Javascript
npm ci命令的基本使用方法
Sep 20 #Javascript
js面试题之异步问题的深入理解
Sep 20 #Javascript
js实现简单的点名器随机色实例代码
Sep 20 #Javascript
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php标签云的实现代码
2012/10/10 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
numpy中矩阵合并的实例
2018/06/15 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python 异步async库的使用说明
2020/05/04 Python
QML用PathView实现轮播图
2020/06/03 Python
python爬取天气数据的实例详解
2020/11/20 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
毕业生文员求职信
2013/11/03 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
期终自我鉴定
2014/02/17 职场文书
经济担保书范文
2014/04/02 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
圆明园观后感
2015/06/03 职场文书
红色影片观后感
2015/06/18 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
MySQL创建管理子分区
2022/04/13 MySQL