Vue.set()动态的新增与修改数据,触发视图更新的方法

参数：

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据(可以是字符串和数字)

value ：重新赋的值

用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

例：

data:{
   namelist:[
     {message:"叶落森",id:"1"},
     {message:"姜艳霞",id:"2"},
     {message:"姜小帅",id:"3"}
   ]
},

 Vue.set(this.namelist,1,{message:"yeluosen",id:"1"})

注：Vue.set()在methods中也可以写成this.$set()

Vue.set()不光能修改数据，还能添加数据

data:{
   items:[
     {message:"Test one",id:"1"},
     {message:"Test two",id:"2"},
     {message:"Test three",id:"3"}
   ]
},
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});

以上这篇Vue.set()动态的新增与修改数据,触发视图更新的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue.set()方法实现响应式修改数组数据步骤

    在页面中显示数组数据时发现了一个问题,当在methods方法中修改数组数据后,虽然数组已经发生改变,但是改变后的数据并没有渲染到页面上.这是因为在VUE中,如果在实例创建之后添加新的属性或者改变属性到实例上,它将不会触发视图更新. 而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的,同时触发视图更新,动态响应数据的变化. 用法如下: Vue.set(object,index,value) object:要更改的数据源(数组或对象) index:数据的索引(第几项) value:修改

  • 浅谈Vue 数据响应式原理

    浅谈Vue 数据响应式原理

    前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程. 本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray(). 改造数据 我们先来尝试写一个函数

  • Vue响应式添加、修改数组和对象的值

    Vue响应式添加、修改数组和对象的值

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后又失去了getter.setter. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 修改数组的长度时,例如: vm.items.length = newLength 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状

  • Vue.set()实现数据动态响应的方法

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

    在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码

  • 浅谈Vue响应式(数组变异方法)

    浅谈Vue响应式(数组变异方法)

    前言 很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的

  • Vue.set()动态的新增与修改数据,触发视图更新的方法

    参数: target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据(可以是字符串和数字) value :重新赋的值 用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新. 例: data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, {message:"姜小帅",id:"3&q

  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • VUE 实现动态给对象增加属性，并触发视图更新操作示例

    本文实例讲述了VUE 实现动态给对象增加属性,并触发视图更新操作.分享给大家供大家参考,具体如下: 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property).然而它可以使用

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> {{date}} </div> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src=&

  • 解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)

    一.在我们使用vue进行开发的过程中,可能会遇到一种情况: 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法 二.Vue.set() 响应式新增与修改数据 此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set 调用方法:

  • Vue之Vue.set动态新增对象属性方法

    当我们给一个比如props中,或者data中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用Vue.set方法 Vue.set方法用来新增对象的属性.如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新 这里本来food对象是没有count属性的,我们要给其添加count属性就必须使用Vue.set方法,而不能写成'this.food.count = 1' 以上这篇Vue之Vue.set动态新增对象属性方法就是小编分享给大家的全部内容了,希望能给大

  • Vue 对象和数据的强制更新方式

    目录 对象和数据的强制更新 数组更新 强制更新 更新数据并强制更新视图 对象类型 数组类型 异步类型 强制更新 对象和数据的强制更新 数组更新 以下支持自动更新 push() //向后添加 pop() //删除最后一个 shift() //删除第一个 unshift() //向第一个添加元素 splice() //向指定位置添加/删除元素 sort() //用原地算法对数组的元素进行排序 reverse() //将数组中元素的位置颠倒 注意,这种形式修改数据 this.arr[1] = ‘x’

  • vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    目录 实现过程 1.实现一个Observer 2.实现Watcher 3.实现Compile 总结 参考文献:https://www.jb51.net/article/160654.htm https://www.jb51.net/article/239554.htm MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Model层代表的是模型.数据,可以在Model层中

  • Vue.set() this.$set()引发的视图更新思考及注意事项

    Vue.set() this.$set()引发的视图更新思考及注意事项

    引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API:   this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr

随机推荐