持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
目录
上一节我们介绍了图片切换的案例，对前面所学知识点进行了巩固，为了实现更为复杂的效果，咱们继续学习新的指令。
一、v-for 语法介绍
这篇我们来介绍一下 v-for 指令，v-for的作用是：根据数据生成列表结构，并且是响应式的。
学习它以后，我们就可以十分便捷的操作列表结构了，至于是什么样的列表，就看你指令的使用位置了。
列表的生成依赖于数据，它结合的类型很多，如：数组、对象、数字字符串、迭代器等。
1、v-for指令_普通数组
但是最常用的是数组，我们就结合数组来看看它的语法：
编辑
arr 就是我们要循环的数据名，跟data里面定义的名字相对应。
in 是关键字，不能修改。
item 是遍历的每一项，可以改名字，只要符合命名规则就可以了。
现在数组中的元素有5个，它就会生成5个 li标签 。
编辑
如果 li标签 里面有内容，它也会一并生成，
比如：里面有“你好”，就会生成5个有“你好”的 li标签，
如果它内部还有后代元素，后代元素也会作为模板一起来生成。
你可以这么理解，v-for指令的作用：是把作为模板的那个标签，还有它内部的所有内容，根据数据的个数，拷贝若干份。
编辑
如果内容有点不一样，该怎么办？item的值是可以用的。
我们也可以使用 item结合其他指令，比如这里我们使用了v-bind指令、插值表达式。
编辑
除了数组的每一项数据之外，数组的索引页也是比较常用的，但是这里就要稍微修改一下语法了，
加上一个 index ，其中 index也是一个占位，它的名字可以更改，只需要符合命名规则就可以啦。
在我们内部使用的时候，直接通过索引的方式，进行占位，这里index直接就可以使用了。
2、v-for指令_对象数组
编辑
如果数组的每一项，不是数字而是对象或者其他复杂的类型，
那么使用的时候，item就代表这一个对象或者其他复杂类型。
编辑
要获取内部的值，要在结合对应的语法，那么这里我们循环的是一个对象数组，
所以我们使用到了点语法。如果不这样用，它会把这一整个对象，全部都渲染出来。
并且 v-for 还有一个很牛逼的特点：如果数组的长度改变了，比如说添加或移除了元素，那生成的列表，也会同步改变。
二、代码验证测试
1、v-for指令之数组
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>13_v-for指令之数组</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li><br>
<li v-for="(item,index) in arr">{{index+1}}城市：{{item}}</li><br>
<!-- item、index都可以修改名字，对应即可。 in是关键字，不能修改 -->
<li v-for="(itemX,index_Y) in arr">{{index_Y+1}}城市：{{itemX}}</li><br>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
//arr: [10, 20, 30, 40],//数字数组
arr: ["北京","上海","广州","深圳"],//字符串数组
},
})
</script>
</body>
</html>
（2）效果展示
编辑
2、v-for指令之对象数组_结合其他指令
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>14_v-for指令之对象数组_结合其他指令</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- 直接写，输出的是对象 -->
<h2 v-for="item in vegetables">{{item}}</h2>
<!-- 通过点语法，获得对象的属性值 -->
<h2 v-for="item in vegetables">{{item.num}}、{{item.name}}</h2>
<!-- 也可以结合其他指令使用，如：v-bind -->
<h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
vegetables:[
{num:"一", name:"西兰花炒鸡蛋"},
{num:"二", name:"西红柿炒鸡蛋"}
]
},
})
</script>
</body>
</html>
（2）效果展示
编辑
3、v-for指令之对象数组_添加删除
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>15_v-for指令之对象数组_添加删除</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- 通过点语法，获得对象的属性值 -->
<h2 v-for="item in vegetables">{{item.num}}、{{item.name}}</h2>
<input type="button" value="添加数据" @click="add"/>
<input type="button" value="移除数据" @click="remove"/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
vegetables:[
{num:"一", name:"西兰花炒鸡蛋"},
{num:"二", name:"西红柿炒鸡蛋"}
]
},
methods: {
add:function(){
// push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
this.vegetables.push({ num: "三",name:"花菜炒肉"});
// 在数组起始位置添加元素请使用 unshift() 方法
//this.vegetables.unshift({ num: "三", name: "花菜炒肉" });
},
remove: function () {
//pop() 方法用于删除并返回数组的最后一个元素
this.vegetables.pop();
//在数组起始位置删除元素请使用 shift() 方法
//this.vegetables.shift();
},
},
})
</script>
</body>
</html>
（2）效果展示
编辑
编辑
三、内容-总结
编辑
\
