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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python小白学习包管理器pip安装
2020/06/09 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
计算机相关的自我评价
2014/01/15 职场文书
教师节倡议书
2014/08/30 职场文书
学校运动会广播稿
2014/10/11 职场文书
寒假安全保证书
2015/02/28 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL