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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
javascript实现获取字符串hash值
May 10 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
javascript实现商品图片放大镜
Nov 28 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+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
《广玉兰》教学反思
2014/04/14 职场文书
企业年检委托书范本
2014/10/14 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
民事辩护词范文
2015/05/21 职场文书
治庸问责工作总结
2015/08/11 职场文书
给校长的建议书范文
2015/09/14 职场文书
如何在Python项目中引入日志
2021/05/31 Python