v-for指令非常重要，它可以遍历数据容器，可以理解成我们以前使用的for in 循环，在很多地方都需要使用它，例如我们网络请求到数据一般都是采用v-for遍历渲染到页面上。

写法：v-for="(el,index) in arr"

el为我们遍历出的数据容器的每一项；

index为索引，从0开始，对应每一项数据；

el，index都是我们自己命名的，我们也可以写成其它的标识符，但是我们程序员一般都是使用el和index表示，index还可以不写，直接el in arr

arr为数据容器。

写一个例子演示一下：

 <div id="box">
        <div v-for="(item, index) in arr">
            {{item}}
        </div>
    </div>
    <script>
        new Vue({
            el:"#box",
            data: {
               arr:["语文","数学","英语"]
            },
        })
    </script>

循环渲染语文、数学、英语：

 可以看到box盒子下生成了三个div标签，即我们可以得出v-for会循环克隆数据容器长度个当前标签。

 在Vue2中，v-for有一个bug,就是v-for遇到v-if放在同一个标签中时，v-for的优先级会比v-if高。

在同一级会造成的问题：当arr 数据容器新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染。

解决方案：采用嵌套写法，将v-for放在外层，v-if放在里层，用vue推出的template标签装v-if，为什么要用template标签呢，因为如果用其它标签渲染完成以后，v-if在那个标签也会被生成，但是它没有用，还浪费资源，所以我们用template标签，可以理解为dom操作中的fragment，完成任务过后他就会自动消失。

这样当arr 数据容器某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

代码结构：

    <div v-for="el in arr">
				<h1>{{el.name}}</h1>
				<template v-if="el.age>10">
				  <div v-for="el in el.titles">{{el}}</div>
				</template>
	</div>

遍历el.title生成的div标签会跟h1同一级，这就是template的好处，判断完它就自己销毁了。

在Vue3中修复了这个bug，框架不允许你将v-for和v-if写在同一个标签下，会报语法错误。

v-for中的key

v-for指令非常的强大，当数据容器中的数据增加时，会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM。这样极大的减少了cpu消耗，提升了性能。

但是按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)

解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

写法：

<div  v-for="el in arr" :key=""></div>

在业务中:key的值一般绑定当前el中特有的id值，即使怎么加数据标签都会与数据一一对应。