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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP 面向对象 final类与final方法
2010/05/05 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
深入分析PHP设计模式
2020/06/15 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
python 爬取学信网登录页面的例子
2019/08/13 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
2014年酒店工作总结与计划
2014/11/17 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年服务员工作总结
2015/04/08 职场文书
大学校园招聘会感想
2015/08/10 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js