v-for

<div id="app">
			<!-- 循环数组 -->
			<ul>
				<!-- item 指代 数组中的值 -->
				<li v-for="item in starts">{{item}}</li>
			</ul>
			<!-- 循环 数组 内容 是 对象 -->

			<ul>
				<!-- 第二个参数可作为数组下标索引，item，index 自己随意起名，看你习惯 -->
				<li v-for="item,index in infoList">
					{{index+1}}
					<div>
					 	姓名：{{item.name}}
					</div>
					<div>
						年龄：{{item.age}}
					</div>
					<div>
						身高：{{item.height}}
					</div>
				</li>
			</ul>
			<!-- 循环对象 如下 键值对 -->
			<div v-for="item,key in infoList[0]">
				键名key：{{key}}---- 值value：{{item}}
			</div>
			<!-- v-for v-if 一同使用 先循环后判断-->
			<ol>
				<li v-for="item,index in infoList" v-if="item.age%2==0">
					{{index+1}}
					<div>
					 	姓名：{{item.name}}
					</div>
					<div>
						年龄：{{item.age}}
					</div>
					<div>
						身高：{{item.height}}
					</div>
				</li>
			</ol>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					starts:["杨幂","唐嫣","小龙女","慕剑璃"],
					infoList:[
						{
							name: "杨幂",
							age: 18,
							height: "158cm"
						},
						{
							name: "唐嫣",
							age: 17,
							height: "168cm"
						},
						{
							name: "小龙女",
							age: 21,
							height: "173cm"
						},
						{
							name: "慕剑璃",
							age: 20,
							height: "183cm"
						}
					]
				}
			})
		</script>

　　

补充key部分内容

　　先复制粘贴以示尊敬

key

      预期：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)

• key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

  有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

  最常见的用例是结合 v-for：

  <ul>
    <li v-for="item in items" :key="item.id">...</li>
  </ul>

  它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

  • 完整地触发组件的生命周期钩子
  • 触发过渡

  例如：

  <transition>
    <span :key="text">{{ text }}</span>
  </transition>

  当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。           

以上是官方文档内容，下面说说咱自己的理解，key这个玩意呢，它是给vue的虚拟dom看的，你不带呢也没关系，当然如果能用好的话会更好

然后再说一下在v-for里的用处，一般而言就是再数据里新插入一条时候性能会比较好，下面画的是修改后带不带key虚拟dom的操作，没key的时候，重新往后排，有key的话，虚拟dom知道谁是谁了，诶，他就知道怎么插进去了，但是需要注意的是不要用index去做这个key。