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 相关文章推荐
Opacity.js
Jan 22 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
如何在Vue中抽离接口配置文件
Oct 31 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 中dirname(_file_)讲解
2007/03/18 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
详解爬虫被封的问题
2019/04/23 Python
python按比例随机切分数据的实现
2019/07/11 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
《三峡》教学反思
2014/03/01 职场文书
元旦晚会感言
2014/03/12 职场文书
文体活动实施方案
2014/03/27 职场文书
实训报告范文大全
2014/11/04 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript