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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
修复ie8&chrome下window的resize事件多次执行
Oct 20 Javascript
没有document.getElementByName方法
Aug 19 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
实现无刷新联动例子汇总
May 20 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
PHP利用str_replace防注入的方法
2013/11/10 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP 实现链式操作
2021/03/09 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
javascript事件模型代码
2007/07/01 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python解析json代码实例解析
2019/11/25 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python中常见错误及解决方法
2020/06/21 Python
从python读取sql的实例方法
2020/07/21 Python
利用python 下载bilibili视频
2020/11/13 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
.net面试题
2016/09/17 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
信访工作者先进事迹
2014/01/17 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python