vue强制更新数据$forceUpdate()和this.$set()-程序员宅基地

技术标签: vue.js  

方法一、

添加this.$forceUpdate();进行强制渲染,效果可以实现。(用来全局强制刷新,性能消耗高)

从搜索资料得出结果:因为数据层次(for循环太多)太多,render函数没有自动更新,需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )

使用方法:

input( ) {
                // vue2的引擎这种数组下标去改变数据的时候视图不会刷新
                this.arr[0]= 10000
                console.log(this.arr)
                // vue2知道自己的bug 全局提供给所有实例了 一个方法 
                // $forceUpdate()  可以让算法重新计算 刷新更新页面 
                this.$forceUpdate()
}

在方法执行完毕后,添加this.$forceUpdate()


方法二、

使用vue中的方法this.set(object, index, new) ,this.set()方法是vue自带的可对数组和对象进行赋值,并触发监听的方法。(用来指向性强制刷新,性能消耗低

参数一:你要改变的数组或对象
参数二:下标,或者元素名称
参数三:得到的新的值


使用方法:

ace(item,index) {
				this.arr[index]=this.arr[index]*10
				this.$set(this.arr,index,this.arr[index])
                // 参数一:你要改变的数组或对象
				// 参数二:下标,或者元素名称
				// 参数三:得到的新的值
}

或者使用set()的另外一种方法:Vue.set(参数一,参数二,参数三)

使用方法:

// this.$set(this.arr[1],'color','黄色香蕉')
   Vue.set(this.arr[1],'color','黄色香蕉')


 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lipeng_kaka/article/details/118942442

智能推荐

18.6 负载均衡集群介绍 18.7 LVS介绍 18.8 LVS调度算法 18.9/18.10 LVS NAT模式搭建-程序员宅基地

文章浏览阅读67次。一、负载均衡集群介绍负载均衡集群:简单地说就是让多台服务器均衡地去承载压力。实现负载均衡的开源软件有:LVS,keepalived,haproxy,nginx等其中相对于(网络OSI七层模型),LVS属于四层,Nginx属于七层,haproxy既可以认为四层,也可以认为是七层。keepalived的负载均衡功能其实就是lvslvs这种4层的负载均衡是可以分发出80外的其他端口通..._18.6 负载均衡集群介绍 18.7 lvs介绍 18.8 lvs调度算法 18.9/18.10 lvs nat模式搭

有哪些好看的CNN模型画法?-程序员宅基地

文章浏览阅读2.2k次。点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达编辑:忆臻本文仅作为学术分享,如果侵权,会删文处理机器学习算法与自然语言处理报道有哪些好看的CNN模型画法?作者:bi..._cnn模型图

Android Studio基础工作流程-xml布局文件如何调用显示_layout xml 怎么加载到view r 怎么取到-程序员宅基地

文章浏览阅读2.2k次,点赞6次,收藏8次。说起安卓开发,很多小伙伴在刚开始入门的时候会有些云里雾里,觉得很混乱,这很正常,大多数是因为不太清楚安卓开发的基本流程,以及各个文件之间是怎样去相互作用的。我会在这篇文章里面向你介绍一下Android studio工作的基本流程,很基础很基础的那种。_layout xml 怎么加载到view r 怎么取到

星载/机载遥感导航论文合集-程序员宅基地

文章浏览阅读657次,点赞5次,收藏12次。采用现有无人车导航系统进行农作物育种表型信息的监测与采集时,存在因育种小区数量较多导致的导航目标点人工测量工作量大的问题,且育种田块不同于大田作物以A-B 线为基线的路径规划方法,无人车需要根据育种材料编号自动行进到某一指定位置进行作物表型信息采集。因此,为提高导航效率和降低人工劳动强度,本文基于无人机遥感对无人车的导航系统进行了研究。通过无人机获取玉米育种田的遥感影像并进行拼接和位置矫正,生成正射影像和数字地表模型(Digital Surface Model,DSM)。

asp.net mvc多条件+分页查询解决方案_.net core mvc+bootstrap 页面分页查询-程序员宅基地

文章浏览阅读7.8k次。开发环境vs2010css:bootstrapjs:jquery bootstrap paginator原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了MVC多条件+分页查询因为美工不是很好,所以用的是bootstrap前端框架,自己懒得写前端的分页控件,用的是bootstrap paginator分页控件。方式: _.net core mvc+bootstrap 页面分页查询

Springboot +spring security,OAuth2 四种授权模式概念_springbootsecurity oauth2-程序员宅基地

文章浏览阅读2.5k次。Springboot +spring security,OAuth2 四种授权模式概念_springbootsecurity oauth2

随便推点

SAP EXCEL上传如何实现指定读取某一个sheet页(ALSM_EXCEL_TO_INTERNAL_TABLE)_raise_exception" saplalsmex" bzw. lalsmexu01 alsm_-程序员宅基地

文章浏览阅读630次,点赞8次,收藏10次。SAP EXCEL上传如何实现指定读取某一个sheet页(ALSM_EXCEL_TO_INTERNAL_TABLE)_raise_exception" saplalsmex" bzw. lalsmexu01 alsm_excel_to_internal_table

win10禁止google更新却在服务中找不到googleupdate,解决方案_服务里面没有谷歌更新服务-程序员宅基地

文章浏览阅读1.1w次,点赞2次,收藏3次。前提:想要使现用chrome不更新,按照网上最多的教程是控制面板-管理工具-服务-找到“Google更新服务(Gupdate)"服务 项与“Google更新服务(Gupdatem)”服务项-选择“禁用”我安装的谷歌浏览器在服务中找不到googleupdate参考教程如下:手动方式:chrome禁止更新如何设置_怎么设置chrome不自动更新-win7之家命令行方式:https://jingyan.baidu.com/article/f3ad7d0f51c6bf09c3345bb0.htm_服务里面没有谷歌更新服务

python人工智能算法pdf_深度学习:人工智能算法(Deep Learning) PDF 高清版-程序员宅基地

文章浏览阅读822次。给大家带来的一篇关于人工智能相关的电子书资源,介绍了关于深度学习、人工智能算法方面的内容,本书是由人民邮电出版社出版,格式为PDF,资源大小30.8 MB,Ian Goodfellow编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.7。内容介绍本书包括3 个部分:第1 部分介绍基本的数学工具和机器学习的概念,它们是深度学习的预备知识;第2 部分系统深入地讲解现今已成熟的深度学习方法和技术..._人工智能 算法 pdf

Opencontrail CentOS66编译全过程_centos6 ipfix-程序员宅基地

文章浏览阅读1.2k次。(一)VNC1 下载如下包 git clonehttps://github.com/Juniper/contrail-testhttps://github.com/Juniper/contrail-provisioninghttps://github.com/Juniper/contrail-fabric-utilshttps://github.com/Juniper/cont_centos6 ipfix

c语言静态两个数码管显示0-99,按键控制计数,用两个数码管显示0到99。十位数为0的时候,显示为空白...-程序员宅基地

文章浏览阅读7.4k次,点赞3次,收藏39次。//用两个数码管显示0到99。十位数为0的时候,显示为空白。//用两个按键控制数值的加减,按一次K1数字加1,按一次K2数字减1,数值的范围是从0到99。//再用一个接近开关控制数字的减小,接近开关感应一次数字减1,减到0停止。// C语言程序如下。/*************************************************************** 文件 : -----..._两位数码管显示功能。具体功能描述如下:数码管可以显示0-99两位数字,按一下加按键

Android开发:设置背景图片_c#andriod 背景图-程序员宅基地

文章浏览阅读3w次,点赞7次,收藏12次。 在Android开发中,设置背景图片是一个既简单又常用的方法,由于本人现在需要同时做Android开发,所以Android的开发技能也要不断学习储备,不仅是为了给老板省钱,也是为了增加自己的竞争力。那么就来分享一下开发心得,给控件添加背景图的方法步骤,Android大牛请飘过,只分享给需要的人,今天分享在这里分享一下给添加背景图片的方法。 设置背景图片有两种方法,但是在..._c#andriod 背景图

推荐文章

热门文章

相关标签