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 防止表单重复提交代码
Jan 21 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Vue实现简单分页器
Dec 29 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
javascript实现简单留言板案例
Feb 09 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 输出双引号"与单引号'的方法
2010/05/09 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
高中毕业生自我鉴定例文
2013/12/29 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
买房子个人收入证明
2014/10/12 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
2015年电教工作总结
2015/05/26 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python爬取某网站原图作为壁纸
2021/06/02 Python
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
CSS的calc函数用法小结
2022/06/25 HTML / CSS