当在组件中使用 v-for 时，key 现在是必须的是为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

1.简单插值的使用

<template>
    <p>{{list[0]}}</p>
    <p>{{list[1]}}</p>
    <p>{{list[2]}}</p>
</template>

<script>
 export default {
    data () {
    return {
      list:[1,2,3],
    }
  },
 }
</script>

2.循环使用 

<template>
    <p v-for="(item,index) in list" :key="index">索引{{index}}----{{item}}</p>
</template>

<script>
 export default {
    data () {
    return {
      list:[1,2,3],
    }
  },
 }
</script>

3. 对象数组

<template>
    <p v-for="(item,index) in list" :key="index">索引{{index}}--{{item.name}}--{{item.money}}</p>
</template>

<script>
 export default {
    data () {
    return {
      list:[
         { "name": "小米手机", "money": 100 }, 
         { "name": "华为手机", "money": 200 }, 
         { "name": "苹果手机", "money": 300 }, 
         { "name": "魅族手机", "money": 400 }
      ],
    }
  },
 }
</script>

4.循环对象 

<template>
     <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in list">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>

</template>

<script>
 export default {
    data () {
    return {
      list:{
        id: 1,
        name: '小明',
        gender: '男'
      },
    }
  },
 }
</script>