v-for的作用：
当我们需要对一组数据进行渲染时，我们就可以使用v-for来完成
v-for常见四种使用方法分别是：
1.使用v-for循环一个简单的数组
2.使用v-for循环一个复杂的数组
3.使用v-for循环对象
4.v-for循环一个迭代的数字
<div id="app">
<!--v-for循环一个简单的数组-->
<!--格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index-->
<p v-for="item in list">{
{item}}</p>
<P v-for="(item ,i) in list">索引值：{
{i}}---每一项：{
{item}}</P>
<!--v-for循环一个复杂的数组-->
<p v-for="(item,i) in list1">索引值：{
{i}}--id：{
{item.userid}}---姓名：{
{item.username}}</p>
<!--v-for循环一个对象-->
<!--参数说明：key和index为可选参数-->
<p v-for="(val,key,i) in list2">id：{
{val}},name:{
{key}},index:{
{i}}</p>
<!--v-for 循环一个迭代数字-->
<p v-for="count in 10">这是第{
{count}}次循环</p>v-for遍历数组
格式：v-for="(item, index) in items"
格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index
<ul>
<li v-for="(item,index) in anime">{
{index+1}}-{
{item}}</li>
</ul>data: {
anime: ['三体', '狐妖小红娘', '天宝伏妖录'],v-for遍历对象
格式：v-for="(value, key, index) in info"。（参数按照重要程度排序）
参数说明：key和index为可选参数
<ul>
<li v-for="(value,key) in info">{
{key}}:{
{value}}</li>
</ul>data: {
info: {
name: "super咖啡",
age: 21,
height: 1.68
}v-for遍历数字
格式：v-for="count in counts"
注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始
<p v-for="count in 10">这是第{
{count}}次循环</p>v-for的key属性
在我们使用v-for时，建议给对应的元素或组件添加一个key属性
为何要添加一个key属性？主要目的就是为了高效的更新虚拟DOM
假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前，diff算法默认是将c更新成f，d更新成c，e更新成d，最后再插入e
而在添加key属性后，key为每一个节点做了一个标识，diff算法可以准确高效的在要求的位置插入新节点
为key赋的值必须要与元素具有一一对应的关系
<li v-for="(item,index) in anime" :key="item">{
{index+1}}-{
{item}}</li>当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性：
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）
v-for中key的使用注意项：
v-for在循环时，key属性只能使用number获取string
key在使用时只能使用v-bind的属性绑定的形式，指定key的值
在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候，必须在使用v-for的同时指定唯一的字符或者number类型：key值