Vue中v-for指令的详细应用与遍历数据说明

1. 指令：v-for。
2. 作用：用于遍历数据，生成多个结构。
3. 语法：v-for="item in xxx" :key="????"。

通俗理解：想生成多个谁，就在谁身上加v-for，别忘了写key。
key的使用原则（同react）：有唯一值就用唯一值（身份证号、手机号、学号…），没有就用索引值。

1. 遍历数组

   <ul>
     <li v-for="(item,index) in arr" :key="index"> {{item}} </li>
   </ul>
   

2. 遍历对象

   <li v-for="(value,key,index) in car" :key="index"> 
     {{value}} - {{key}} - {{index}}
   </li>
   

3. 遍历字符串

   <li v-for="(char,index) in str" :key="index"> 
     {{char}} - {{index}} 
   </li>
   

4. 遍历指定次数

   <li v-for="(number,index) in 10" :key="index"> 
     {{number}} - {{index}}
   </li>
   

5. v-for很健壮，遍历如下内容都不会报错

   <h1 v-for="(a,b) in null">你好</h1>
   <h1 v-for="(a,b) in undefined">你好</h1>
   <h1 v-for="(a,b) in '' ">你好</h1>
   <h1 v-for="(a,b) in true ">你好</h1>