v-for 指令的四种使用方式

<ul>
        <!-- v-for 可以循环数据  item 是数组 list 的单元项, index 是单元项对应的下标 -->
        <li v-for='(item, index) in list' :key="index">{{item}}</li>
    </ul>

data: {
          list: [ '第一课的内容', '第二课的内容' ]  
        }

 <ul>
        <li v-for='(item, index) in list' :key="index"> {{ item.name }} ----- {{ item.id }} ----- {{ index }}</li>
    </ul> 

data: {
          list: [ 
              { id: 1, name: "张三" },
              { id: 2, name: "李四" },
              { id: 3, name: "王五" }
          ]  
        }

  <ul> 
        <!--总结：数组和对象的 index 和 key 永远都放在小括号里的第二位，item 和 value 放在第一位--> 
        <!--注意： 在遍历对象身上的键值对时，除了有 value, key, 在第三个位置还有 一个索引--> 
        <li v-for="(value, key, index) in obj" :key="index">值是： {{ value }} ----- 键是 {{ key }} ---- 索引是{{ index }}</li> 
    </ul> 

data: {
          obj: { 
              id: 1, 
              name: "田女士",
              gender: "女"
               }   
        }

 <ul> 
        <!-- in 后面我们放过 普通数组，对象数组，对象，还可以放数字 --> 
        <!-- 注意：如果使用v-for迭代数字的话，前面的count 值从1开始 --> 
        <li v-for="count in 10" :key="count">这是第 {{ count }} 次循环</li> 
    </ul> 

 <!-- 在 v-for 循环时，每一个循环项上最好都加上一个 key 值，提高性能：--> 
1. key 属性的值只能使用 number 或者 string 类型；（不推荐使用 index 作为唯一的 key 值，推荐使用 item.id (后台数据里的id)）； 
2. key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值； 
3. 当在组件中使用 v-for 时， key 是必须的： 
     <TodoItem v-for="(item, index) in list" 
             :item="item" 
             :index="index" 
             :key="item.id" 
     > 
     </TodoItem> 
 
4. 任何数据都不会自动传递到组件里面，因为组件有自己独立的作用域。 
如果要传递数据到组件，需要用 props。