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 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue基础知识--axios合并请求和slot
Jun 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
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
详解php用static方法的原因
2018/09/12 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
js实现秒表计时器
2019/12/16 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python实现八大排序算法(1)
2017/09/14 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
前台文员的岗位职责
2013/11/14 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
运动会广播稿20字
2014/02/18 职场文书
本科毕业生求职信
2014/06/15 职场文书
药剂专业求职信
2014/06/20 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
新员工入职欢迎词
2015/01/23 职场文书
《鲸》教学反思
2016/02/23 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript