Vue.set()实现数据动态响应

2019独角兽企业重金招聘Python工程师标准>>>

this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。

在vue里面，我们操作最多的就是各种数据，在jquery里面，我们习惯通过下标定向找到数据，然后重新赋值

比如var a[0]=111;（希望上家公司原谅菜鸟的我写了不少这样的代码）

下面上代码

<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="./js/vue.min.js"></script>
</head>
<body><div id="app"><ul><li v-for="item in listData">{{item}}</li></ul><a href="javascript:void(0)" v-text="he" @click="changeData()"></a></div>
</body>
<script>new Vue({el:"#app",data:{he:"点我",listData:["a","b","c"]},methods:{changeData () {this.listData[0]="d";}}})
</script>
</html>

当我点击按钮时候，发现没有任何变化，页面上还是a,b,c

vue当然不会这么菜呢

下面是伟大的vue内置的方法来了

Vue.set() 官方解释：设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

我的理解就是触发视图重新更新一遍，数据动态起来

Vue.set(a,b,c)

a是要更改的数据 b是数据的第几项 c是更改后的数据

解决上面数据不能更改后的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="./js/vue.min.js"></script>
</head>
<body><div id="app"><ul><li v-for="item in listData">{{item}}</li></ul><a href="javascript:void(0)" v-text="he" @click="changeData()"></a></div>
</body>
<script>new Vue({el:"#app",data:{he:"点我",listData:["a","b","c"]},methods:{changeData () {Vue.set(this.listData,0,'X')}}})
</script>
</html>

我们可以看到，this.listData数组的第一项已经被更改了

转载于:https://my.oschina.net/shuaihong/blog/1619450

Vue.set()实现数据动态响应相关推荐

XLSReadWriteII 读取EXCEL数据动态响应字段的列编号
XLSReadWriteII 读取EXCEL数据动态响应字段的列编号我们在通过XLSReadWriteII读取EXCEL表中的数据时,往往通过EXCEL中二个列,对应数据库中的指定字段,通过索引& ...
vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
vue --- 2.0数据的响应式的一种实现
初识: 实际上是通过Object.defineProperty()方法来实现的 talk is cheap, show your code let obj = {}; Object.definePro ...
处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题
1. 组件执行顺序导致: 父组件:created->子组件:created->子组件:mounted->父组件:mounted 2.问题子组件无法获取到值 //父组件 exp ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
vue+ele 实现v-for动态数据循环表单，然后对每个结构进行表单校验的方法
vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法项目开发时遇到form结构是动态遍历出来的,但是每个遍历出来的表单都需要做相对应的检验处理,ele提供的办法只能对单个 ...
vue 数组指定位置添加数据_VUE 响应式原理源码：带你一步精通 VUE | 原力计划...
作者 | 爱编程的小和尚责编 | 王晓曼出品 | CSDN博客学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
vue复杂表格单元格合并根据数据动态合并
我们在开发中最常见的就是表格,而往往有一些复杂表格都不大好实现,对于合并单元格不是固定的,而是需要根据数据是否相同去动态设置合并的表格,本文把方法分享给大家,可以根据数据动态生成合并单元格,无论导出需 ...

Vue.set()实现数据动态响应

我们可以看到，this.listData数组的第一项已经被更改了

Vue.set()实现数据动态响应相关推荐

最新文章

热门文章