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 相关文章推荐
firefox下input type="file"的size是多大
Oct 24 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
layui导航栏实现代码
May 19 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
js代码编写无缝轮播图
Sep 13 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
django中的ajax组件教程详解
2018/10/18 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
vue 微信授权登录解决方案
2018/04/10 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
Python中关于使用模块的基础知识
2015/05/24 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
数据库方面面试题
2012/04/22 面试题
remote接口和home接口主要作用
2013/05/15 面试题
企业承诺书怎么写
2014/05/24 职场文书
技校毕业生自荐信
2014/06/03 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
少年雷锋观后感
2015/06/10 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL