vue数据更新，视图不更新

最新推荐文章于 2024-06-18 14:30:04 发布

原创最新推荐文章于 2024-06-18 14:30:04 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

需求是动态控制显示与隐藏
<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();
		}
		强制刷新频繁调用会给网页造成压力