Vue 更改数组中的值,页面不刷新问题。解决方法+原理说明
一、Vue 更改数组中的值,页面不刷新问题
data{
hobby:["打游戏",“想静静”,“发呆”]
}
1、错误写法(页面不刷新):
this.hobby[0]="学习";
2、正确写法(页面刷新):
(1)方法1,调用列表操作函数更新数组数据 : this.hobby.splice(0,1,"学习");
(2)方法2,调用Vue的set方法更新数组数据:this.$set(this.hobby,0,"学习");
二、Vue监视数据的原理如下:
1、Vue 会监视数据中所有层次的数据
2、如何检测对象中的数据?
答:通过setter实现监视,且要在new Vue时就传入要监测的数据。
(1)对象中追加的属性,Vue 默认不做响应式处理;
(2)如需给后添加的属性做响应式,请使用如下API:
Vue.set(target,propertyName/Index,value);或 this.$set(target,propertyName/Index);
3、如何监测数组中的数据?
答:通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1)调用原生对应的方法数组进行更新;
(2)重新解析模板,进行更新页面。
4、在Vue 修改数组中的某个元素,一定要用如下方法:
(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、rverse()
(2)Vue.set()或vm.$set()
push():往数组最后添加一个元素;
pop():删除数组最后一个元素;
shift():删除数组第一个元素;
unshift():往数组最前面添加一个元素
splice():操作某个元素,可修改数组中的元素
sort():排序
reverse():数组反转
5、特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!
6、直接操作数组,页面不更新;直接操作对象,页面更新
(1)this.student.hobby[0]="学习";(操作数组,页面不刷新)
(2)this.student.friend[0].name="张三";(操作对象,页面刷新)
视频讲解:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=37&vd_source=60a28e8364654bee938864b1d19905ec
第35、36、37集
最新文章
- ASP.NET Core 中文文档 第三章 原理(13)管理应用程序状态
- Daily Scrum 12.11
- Bootstrap配套的js框架
- Oracle Job相关
- UVA 10917 Walk Through the Forest(dijkstra+DAG上的dp)
- 写sql语句注意事项
- Hadoop--Hadoop的机架感知
- Swift学习之十四:闭包(Closures)
- paip. everything exe 文件不能启动的解决
- VMware vCloud与Zend Server实现PHP应用程序自动化交付
- constrain to margins
- [netty源码分析]3 eventLoop 实现类SingleThreadEventLoop职责与实现
- 兼容低版本JS的Array.map方法
- Maven私服(Repository Manager) - Nexus安装和使用(详细过程)
- Maven项目读取resources下文件的路径问题(getClassLoader的作用)
- Go Example--常量
- 王家林系列之scala--第69讲:Scala并发编程react、loop代码实战详解
- Android初识Helloworld
- element-ui upload组建上传 file-list踩过的坑
- Python可视化库
热门文章
- JavaSE总结(2)
- eclipse调整控制台长度
- django-drf知识点梳理
- vue框架4
- 预处理指令详解(C语言
- System.IO.FileNotFoundException: Could not load file or assembly 'System.IO.Compression.FileSystem系统找不到指定的文件
- Traefik官方文档以及翻译文档
- HUAWEI--配置单臂路由
- element-ui组件Table排序(sort-by),某些数据无需排序
- word和excel转pdf