vue数据更新，视图不更新

zhangzuruiqqq

于 2023-09-18 10:52:33 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/zhangzuruiqqq/article/details/132968264

文章介绍了在Vue中使用v-show、v-if、三等号判断和set方法控制元素显示与隐藏的方法，指出频繁使用$forceUpdate可能导致性能问题。作者建议优先考虑前三种非强制刷新方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是动态控制显示与隐藏
<div  v-show="form.memberOrders[index].tableShow" ></div >

如果使用前三个方法生效  不建议加入最后的强制刷新
方法一 
修改v-show为v-if
<div  v-if="form.memberOrders[index].tableShow" ></div >

方法二
三等号判断
<div  v-show="form.memberOrders[index].tableShow === true" ></div >

方法三
使用set方法
   getOrder(orderCode,index){
      // this.form.memberOrders[index].tableShow=true
      this.$set(this.form.memberOrders[index],'tableShow',true);
      }

都不生效使用最终方法  
方法四 
强制刷新
    getOrder(orderCode,index){
      // this.form.memberOrders[index].tableShow=true
      this.$set(this.form.memberOrders[index],'tableShow',true);
		this.$forceUpdate();
		}
		强制刷新频繁调用会给网页造成压力