vue之数组与对象的检测与更新
说明
MVVM会自动检测变量的变化，当变量改变，页面也会对应的变化，但是有一点需要注意，如果有一个对象增加值的时候，不能直接修改，需要使用Vue.set()方法
语法
Vue.set(this.变量, 键, 值)
示例
<body>
<div id="app">
<div v-for="(value, key) in d1">
<h1>key是：{{key}}，value是：{{value}}</h1>
<h1></h1>
</div>
// 点击按钮后，添加hobby: game键值对
<button @click="clickBtn">点我添加数据</button>
</div>
</body>
<script>
vm = new Vue({
el: '#app',
data: {
d1: {name: 'zzz', age: 10}
},
methods: {
clickBtn() {
this.d1['hobby'] = 'game'
}
}
})
</script>
如下图可以看到，值有了，但是页面没有变化，这时候就需要使用set方法
<script>
vm = new Vue({
el: '#app',
data: {
d1: {name: 'zzz', age: 10}
},
methods: {
clickBtn() {
// 对于页面未监控到变化的情况，都需要使用Vue.set()方法
Vue.set(this.d1, 'hobby', 'game')
}
}
})
</script>
vue之数组与对象的检测与更新的更多相关文章
- Vue 改变数组中对象的属性不重新渲染View的解决方案
Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...
- Vue中关于数组与对象修改触发页面更新的机制与原理简析
Vue中关于数组与对象修改触发页面更新的机制与原理简析 相关问题 数组 使用索引直接赋值与直接修改数组length时,不会触发页面更新. 例如: <script> export defau ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- Vue 使用数组和对象控制Class
直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UT ...
- vue 关于数组和对象的更新
在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...
- vue 保存数组和对象, 避免双向绑定影响
很多时候需要保存数据然后复用该数据,因vue的双向绑定总是不能保存原始数据 随笔记录解决方式 1. 不要把变量放置在data中 2. 保存至新的变量 object : let obj= Objec ...
- vue watch数组或者对象
1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...
- vue数据绑定数组，改变元素时不更新view问题
关于这个问题,官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa i ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- vue 数组和对象渲染问题
vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
随机推荐
- 【Delphi7官方镜像版】delphi_7_ent_en官方镜像 阿里云盘
[Delphi7官方镜像版]「delphi_7_ent_en官方镜像.iso.exe」https://www.aliyundrive.com/s/Du9C4XfZfwG 点击链接保存,或者复制本段内容 ...
- pyechart画图（1）安装和基本操作
安装 pip install pyecharts==0.1.9.4 https://blog.csdn.net/weixin_43735353/article/details/89328048 Lin ...
- homework1（1）
来自桂林理工大学物联网工程2019届的April 没参与过什么比赛项目但是课程学习能力还行,主要是快速学习之后很快就会忘记,接下来应该好好的总结并熟练记住运用知识完成对生活等各种的实践. 对课程的希望 ...
- 20220719 第七组 陈美娜 Java(this,封装，构造器概念)
1.关于构造器 如果说创建对象仅仅是为了调用这个类的方法,建议使用无参构造器 如果说创建对象的时候需要使用到对象的某个属性,可以使用构造器赋值 2.this关键字 this代表的是当前类的对象,thi ...
- error: You must be logged in to the server (Unauthorized) 问题处理
故障现象: 执行kubectl 命令时: 提示"error: You must be logged in to the server (Unauthorized)" 分析: 权限问 ...
- pytorch 创建图与叶子节点与根节点
创建时用户直接给出的为叶子节点,没有fn 由几个叶子节点推导来的为最终结果,为root节点,有fn. 譬如: x=tt.tensor([1],dtype='flaot',requires_grad=T ...
- openvas漏洞扫描：使用openvas时扫描漏洞时，报告中显示的数据与数据库数据不同
使用openvas设备进行漏洞扫描时,报告中的漏洞数量与readis数据库中查找到的漏洞数量不同 原因是,openvas的代码中默认在报告中显示的最小质量检测为70%.如图: 上图详细链接为:http ...
- C++学习流程
一.初级入门阶段 数据类型.变量.内存布局.指针基础: 字符串.一维数组.二维数组: 一级指针,二级指针,三级指针,N级指针概念,指针数组和数组指针: 结构体.文件的使用: 动态库的封装和设计: 函数 ...
- 如何利用 C# + Echarts 绘制 Bar Simple
背景 Echarts 是百度推出的一个使用 JavaScript 实现的开源可视化库. 该库提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图, ...
- WEB开发日志1
2020/6/11 23:23 今天做系统时,用到二级菜单,菜单下方放了一个<iframe>标签,但二级菜单的菜单项太多,导致一部分菜单项被<iframe>覆盖,从而无法再选中 ...