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 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
js调用css属性写法
Sep 21 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
简单的js计算器实现
Oct 26 Javascript
javascript实现简易计算器
Feb 01 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP常用函数小技巧
2008/09/11 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
javascript基础知识讲解
2017/01/11 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python微信好友数据分析详解
2018/11/19 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
python 实现IP子网计算
2021/02/18 Python
客户代表自我评价范例
2013/09/24 职场文书
函授药学自我鉴定
2014/02/07 职场文书
剪彩仪式主持词
2014/03/19 职场文书
教师师德演讲稿
2014/05/06 职场文书
微电影大赛策划方案
2014/06/05 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
导游欢送词
2015/01/31 职场文书
邀请书模板
2015/02/02 职场文书
班主任开场白
2015/06/01 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书