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高效反选具体实现
May 05 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
解决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使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP反射API示例分享
2016/10/08 PHP
初学JavaScript第二章
2008/09/30 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
深入探究node之Transform
2017/07/20 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python教程之全局变量用法
2016/06/27 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Django实现分页功能
2018/07/02 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
学习十八届三中全会精神实施方案
2014/02/17 职场文书
法定代表人身份证明书
2014/09/10 职场文书
企业年检委托书范本
2014/10/14 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技