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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 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
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python 登录网站详解及实例
2017/04/11 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python实现图书管理系统
2018/03/12 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python3实现表白神器
2019/04/09 Python
python基于递归解决背包问题详解
2019/07/03 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python类继承和多态原理解析
2020/02/05 Python
Python 读取位于包中的数据文件
2020/08/07 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
财务经理岗位职责
2013/11/09 职场文书
模具数控专业自荐信
2014/01/27 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
活动总结模板
2014/05/09 职场文书
比赛口号大全
2014/06/10 职场文书