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 相关文章推荐
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
微信小程序实现日历效果
Dec 28 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
解决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将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python分割文件的常用方法
2014/11/01 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python Django搭建网站流程图解
2020/06/13 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
开工典礼策划方案
2014/05/23 职场文书
驻村工作先进事迹
2014/08/14 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
学习三严三实心得体会
2014/10/13 职场文书
关于颐和园的导游词
2015/01/30 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
MySQL通过binlog恢复数据
2021/05/27 MySQL
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis