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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
简单谈谈json跨域
Mar 13 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
浅析JavaScript动画
2015/06/10 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
jstree的简单实例
2016/12/01 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
软件测试笔试题
2012/10/25 面试题
母亲追悼会答谢词
2014/01/27 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
手机被没收检讨书
2014/02/22 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Java死锁的排查
2022/05/11 Java/Android