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

 更新时间:2020年09月21日 08:41:39   作者:晴天有点孤单  
这篇文章主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

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

页面展示:

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

代码:

<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;
 
},

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

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

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

相关文章

  • Vue在原窗口与新窗口打开外部链接的实现代码

    Vue在原窗口与新窗口打开外部链接的实现代码

    这篇文章主要介绍了Vue如何在原窗口与新窗口打开外部链接,文中给大家提到了vue跳转外部链接的实现代码,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue.js实现仿原生ios时间选择组件实例代码

    vue.js实现仿原生ios时间选择组件实例代码

    本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12
  • uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)

    uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)

    我在做uniapp项目时,用的uni-file-picker组件,这是我做的一个项目实例,主要是将图片通过接口传至后台服务器,本文给大家分享uniapp组件uni-file-picker中对上传的图片进行压缩再上传,感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • Vue Token过期问题的2种解决方案小结

    Vue Token过期问题的2种解决方案小结

    在使用token进行登录的过程中,如果token过期了,需要重新输入用户名和密码登录,这种体验肯定是不好的,下面这篇文章主要给大家介绍了关于Vue Token过期问题的2种解决方案,需要的朋友可以参考下
    2023-02-02
  • Vue如何获取url路由地址和参数简单示例

    Vue如何获取url路由地址和参数简单示例

    这篇文章主要给大家介绍了Vue如何获取url路由地址和参数的相关资料,通过简单的代码示例,帮助读者快速掌握Vue路由的基本用法,需要的朋友可以参考下
    2023-03-03
  • Vue通过ref获取dom元素属性的方法

    Vue通过ref获取dom元素属性的方法

    这篇文章主要介绍了Vue通过ref获取dom元素属性的方法,文中有详细的方法介绍,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • vue项目完成后如何实现项目优化的示例

    vue项目完成后如何实现项目优化的示例

    本文主要介绍了vue项目完成后如何实现项目优化的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 为vue中的data赋值computed计算属性后,出现undefined原因及解决

    为vue中的data赋值computed计算属性后,出现undefined原因及解决

    这篇文章主要介绍了为vue中的data赋值computed计算属性后,出现undefined原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • MVVM模型在Vue中的使用详解

    MVVM模型在Vue中的使用详解

    MVVM模型主要是为了分离视图(View)和模型(Model),其优点为:低耦合、可重用性、独立开发以及可测试,视图和模型分离的特点给了 Vue 很大的启发,这篇文章主要介绍了MVVM模型在Vue中的使用,需要的朋友可以参考下
    2022-11-11

最新评论