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


Posted in Javascript onSeptember 15, 2018

参数:

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()动态的新增与修改数据,触发视图更新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
ES6的解构赋值实例详解
May 06 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 #Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 #Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 #Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 #Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 #Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 #Javascript
You might like
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
js中开关变量使用实例
2017/02/24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
python聊天程序实例代码分享
2013/11/18 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python常用的json标准库
2019/02/19 Python
wxPython色环电阻计算器
2019/11/18 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python全栈开发语法总结
2020/11/22 Python
python 高阶函数简单介绍
2021/02/19 Python
经典安踏广告词
2014/03/21 职场文书
安全生产承诺书
2014/03/26 职场文书
春季防火方案
2014/05/10 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
小学班主任事迹材料
2014/12/17 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Java中的随机数Random
2022/03/17 Java/Android