Vue中的循环渲染v-for
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值，即使怎么加数据标签都会与数据一一对应。