今天要写的是Vue很香的一个指令v-for，这个指令在结构中实现循环，基于数据多次渲染元素，在减少代码量的情况下，又使得逻辑关系一目了然，很奈斯。不多说啦，就开始吧。
目录
1.使用方法
1）v-for中使用数组
2）v-for中使用对象
3）v-for中适用数字
4）v-for中使用字符串
2. key
1.使用方法
v-for指令中可以使用数组、对象、数字、以及字符串，下面我们一一举例，首先把vue.js文件引进来
<script src="/npm/vue/dist/vue.js"></script>
1）v-for中使用数组
语法：(item, index) in items
其中 items为源数据数组，item 数组元素别名，index 为索引，可填可不填，举个栗子
<ul id="app"><li v-for='(person, index) in persons'>{{index}}——{{person}}</li></ul>
const vm = new Vue({el: '#app',data: {persons: ["IronMan", 'CaptainAmerican', 'Holk', 'Thor']}});
【结果】页面渲染如下
【注】可以利用 of 替代 in 作为分隔符，因为它更接近迭代器的语法，如下
<li v-for='(person, index) of persons'>{{index}}——{{person}}</li>
2）v-for中使用对象
语法：(value, key, index) in Object
其中 value 是对象值；key 为键名，可选填；index 还是索引，也可选填，举个栗子
<ul id="app"><li v-for="(value, key, index) in persons">{{ index }}——{{ key }}_{{ value }}</li></ul>
const vm = new Vue({el: '#app',data: {persons: {IronMan: 'Tony Stack', CaptainAmerican: 'Steven Steve Rogers',Holk: 'Robert Bruce Banner',}}});
【结果】
3）v-for中适用数字
语法：n in num
n 为从1开始的数字，栗子如下
<ul id="app"><li v-for="n in num">{{ n }}</li></ul>
const vm = new Vue({el: '#app',data: {num: 5}});
【结果】
4）v-for中使用字符串
语法：str in string
<ul id="app"><li v-for="str in string">{{ str }}</li></ul>
const vm = new Vue({el: '#app',data: {string: 'Good Luck'}});
【结果】
【注】可以利用template元素循环渲染一段包含多个元素的内容
<ul id="app"><template v-for="(hero,key) in heros"><li>{{ key }}</li><li>{{ hero.name }}</li><li>{{ hero.player }}</li></template></ul>
const vm = new Vue({el: '#app',data: {heros: {IronMan:{name: 'Tony Stack',player: 'Robert Downey Jr.'},Holk: {name: 'Robert Bruce Banner',player: 'Mark Alan Ruffalo'}}}});
【结果】
2. key
Vue 更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，如下
<ul id="app"><li v-for="(person,index) in persons">{{ person }}<input type="text"/><button @click="handleClick(index)">down</button></li></ul>
const vm = new Vue({el: '#app',data: {persons: ["IronMan", 'CaptainAmerican', 'Holk', 'Thor']},methods: {handleClick(index) {const deleteItem = this.persons.splice(index, 1);this.persons.splice(index + 1, 0, ...deleteItem)}}});
【结果】
在“就地复用”策略中，点击按钮，输入框不随文本一起下移，是因为输入框没有与数据绑定，所以 vue,js 默认使用已经渲染的 dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在 vue 中是默认的列表渲染策略，因为高效。
这个默认的模式是高效的，但是在更多的时候，我们并不需要这样的处理方式，所以，为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，我们需要为每项提供一个唯一key特性，vue会基于key的变化重新排列元素顺序，并且会移除key不存在的元素，栗子如下：
<ul id="app"><li v-for="(person,index) in persons" :key='person'>{{ person }}<input type="text"/><button @click="handleClick(index)">down</button></li></ul>
【结果】
【注】
（1）不建议将数组的索引作为key值，因为如果使用数组的索引作为key值时，页面重新渲染后，元素的key值会重新被赋值。
（2）key值是唯一的，跟后台协作时，传回来的每一条数据都有一个id值，可以用作key值
