详解 Vue 的 v-for 指令

浅谈Vue 中列表渲染中用到的v-for：

  v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值

1. 基本使用【遍历一般数组】：

<div id="app">
        <ul>
           <li v-for="item in arr">
               {{item}}
           </li>
        </ul>
</div>
<script src = "vue.js"></script>
<script>
     var vue = new Vue({
              el: "#app",
              data: {
                  arr:[1,2,3,4,5,6,7,8,9]
              }
          })
 </script>

v-for还有index和key属性：

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

• item指的是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名
• index指的是每一项被遍历的值的下标索引值
• key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新（因为vue的底层是一个虚拟的DOM，如果不加key，在计算的过程中，找不到依据，因为它需要去进行重复的全部的渲染，所以加一个key，它会有一个比较，做一个区分，实现最小量的更新）

2. v-for遍历对象：

 <div id="app">
        <ul>
           <li v-for="(item,index) in obj" :key="index">{{index}}-{{item}}</li>
        </ul>
 </div>
 <script src = "js/vue.js"></script>
 <script>
         var vue = new Vue({
              el: "#app",
              data: {
                    bj:{
                         name: '小明',
                         age: '17岁', 
                         sex: '男',                     
                     }
                 }
          })
  </script>

和数组内容不同的是index此时代表的是对象的key：

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

• item表示对象的内容
• key表示的是对象key键值名称
• index表示的是当前obj的下标索引值

3. v-for遍历JSON：

<div id="app">
           <table>
               <tr>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>性别</th>
               </tr>
               <tr v-for="(item,index) in obj">
                   <!-- JOSN中的姓名 -->
                  <td>{{item.name}}</td>
                  <!-- JOSN中的年龄 -->
                  <td>{{item.age}}</td>
                  <!-- JOSN中的性别 -->
                  <td>{{item.sex}}</td>              
              </tr>
          </table>
          
      </div>
      <script src = "js/vue.js"></script>
      <script>
             var vue = new Vue({
                  el: "#app",
                  data: {
                      obj: [
                          {name:'张三',age: '17',sex:'男'},
                          {name:'李四',age: '18',sex:'女'},
                          {name:'王五',age: '19',sex:'男'},
                          {name:'赵六',age: '20',sex:'男'}
                      ]
                  }
              })
  
      </script>

Vue 的 v-for 指令差不多就结束了哦！