这里我定义了一个列表数据，我将通过三个不同的按钮来控制列表数据。

首先在列表中动态新增一条数据：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app2">
<!--想了解这里key的作用请访问：(https://cn.vuejs.org/v2/api/#key)-->
<p v-for="item in items" :key="item.id">
{{item.message}}
</p>
<!--@click等价于v-on:click-->
<button class="btn" @click="btn1Click()">点我试试</button><br/>
</div>

<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
el:"#app2",
data:{
items:[
{message:"Test one",id:"1"},
{message:"Test two",id:"2"},
{message:"Test three",id:"3"}
]
},
methods:{
btn1Click:function(){
this.items.push({message:"动态新增"});//为data中的items动态新增一条数据
}
}
});
</script>
</body>
</html>

这是我点击之前的列表：

点击之后列表新增了一条数据：

通过数组的变异方法（Vue数组变异方法）我们可以动态控制数据的增减，但是我们却无法做到对某一条数据的修改。这时候就需要Vue的内置方法来帮忙了~

Vue.set() 响应式新增与修改数据
此时我们需要知道Vue.set()需要哪些参数，官方API：Vue.set()

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

我们依然用上面列表举例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app2">
<p v-for="item in items" :key="item.id">
{{item.message}}
</p>
<button class="btn" @click="btn2Click()">动态赋值</button><br/><br/>
<button class="btn" @click="btn3Click()">为data新增属性</button>
</div>

<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
el:"#app2",
data:{
items:[
{message:"Test one",id:"1"},
{message:"Test two",id:"2"},
{message:"Test three",id:"3"}
]
},
methods:{
btn2Click:function(){
//Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到items
Vue.set(this.items,0,{message:"Change Test",id:'10'})
},
btn3Click:function(){
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
}
}
});

</script>
</body>
</html>

此时页面是这样

我点击第一个按钮后运行methods中的btn2Clcick方法，此时我要将Test one更改为Change Test

运行后的结果：此时列表中第一列的Test one已经变成了Change Test

这里得警惕一种情况：
当写惯了JS之后，有可能我会想改数组中某个下标的中的数据我直接this.items[XX]就改了，如：

btn2Click:function(){
this.items[0]={message:"Change Test",id:'10'}
}

我们来看看结果：

这种情况，是Vue文档中明确指出的注意事项，由于 JavaScript 的限制，Vue 不能检测出数据的改变，所以当我们需要动态改变数据的时候，Vue.set()完全可以满足我们的需求。

仔细看的同学会问了，这不是还有一个按钮吗，有什么用？

我们还是直接看：

这是初始的列表数据，数据里面有三个对象

点击之后：

这里可以看出，Vue.set()不光能修改数据，还能添加数据，弥补了Vue数组变异方法的不足

Tip:Vue.set()在methods中也可以写成this.$set()
---------------------
作者：PromiseKeeping
来源：CSDN
原文：https://blog.csdn.net/qq_30455841/article/details/78666571
版权声明：本文为博主原创文章，转载请附上博文链接！

vue 2.0 vue.set的使用方法的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. Vue 2.0学习（七）方法与事件

    基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...

  3. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  4. vue 3.0 体验，vue 3.0新特性

    前言 昨天不是尤雨溪 不是刚在B站 直播玩了,分享了vue-next v3.0.0-beta.1 版本 哈哈, 不要太刺激哦 6大亮点 Performance:性能更比Vue 2.0强. Tree s ...

  5. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  6. 新手入门指导：Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  7. Vue.2.0.5-过渡状态

    过渡状态 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都 ...

  8. Vue.2.0.5-过渡效果

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  9. Vue.2.0.5-组件

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在 ...

随机推荐

  1. ES6-循环

    forEach 方法来遍历数组,不能使用break语句中断循环,也不能使用return语句返回到外层函数 myArray.forEach(function (value) { console.log( ...

  2. 查看linux 内核版本信息

    uname -r2.6.32-696.el6.x86_64uname -ix86_64

  3. 用swagger生成接口文档代码

    1.Swagger2类: package com.example.demo; import com.google.common.base.Predicate; import io.swagger.an ...

  4. loadrunner json参数化

    因为json格式有{},所以LR参数化时如果也用默认的{}的话,会冲突,这样脚本运行时就无法识别,导致不能正确的读取参数化文件里的内容,此时把参数化的{}改成其他符号即可,比如<>

  5. 第三节 java 数组（循环遍历、获取数组的最值（最大值和最小值）、选择排序、冒泡排序、练习控制台输出大写的A）

    获取数组的最值(最大值和最小值) 思路: 1.获取最值需要进行比较,每一次比较都会有一个较大的值,因为该 值不确定,需要一个变量进行临储. 2.让数组中的每一个元素都和这个变量中的值进行比较,如果大于 ...

  6. DevExpress WinForms v18.2新版亮点（二）

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress WinForms v1 ...

  7. git相关知识点

    git add 和 git stage 有什么区别: 工作区(Working Directory).暂存区(Stage)和历史记录区(History)以及转换关系不能少: git stage 是 gi ...

  8. 使用FileResult导出Excel数据文件

    用的是Html拼接成Table表格的方式,返回 FileResult 输出一个二进制的文件. 第一种:使用FileContentResult // 通过使用文件内容,内容类型,文件名称创建一个File ...

  9. jquery 正则表达式

  10. Arduino 串口输出LM35温度

    #include "stdlib.h" float temp = 0.0; float maxtemp = 0.0; float mintemp =100.0; // the se ...