v-for是vue 的循環指令，作用是遍歷數組（對象）的每一個值。
基本使用：
1 <div id="app"> 2 <ul> 3 <li v-for="item in arr"> 4 {{item}} 5 </li> 6 </ul> 7 </div> 8 <script src = "js/vue.js"></script> 9 <script> 10 var vue = new Vue({ 11 el: "#app", 12 data: { 13 arr:[1,2,3,4,5,6,7,8,9] 14 } 15 }) 16 </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，它會有一個比較，做一個區分，實現最小量的更新）
v-for還可以用來遍歷對象：
1 <div id="app"> 2 <ul> 3 <li v-for="(item,index) in obj" :key="index">{{index}}-{{item}}</li> 4 </ul> 5 </div> 6 <script src = "js/vue.js"></script> 7 <script> 8 var vue = new Vue({ 9 el: "#app", 10 data: { 11 obj:{ 12 name: '小明', 13 age: '17歲', 14 sex: '男', 15 } 16 } 17 }) 18 </script>
和數組內容不同的是index此時代表的是對象的key；
1 <li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>
item表示對象的內容；
key表示的是對象key鍵值名稱；
index表示的是當前obj的下標索引值；
v-for還可以用來遍歷JSON：
1 <div id="app"> 2 <table> 3 <tr> 4 <th>姓名</th> 5 <th>年齡</th> 6 <th>性別</th> 7 </tr> 8 <tr v-for="(item,index) in obj"> 9 <!-- JOSN中的姓名 --> 10 <td>{{item.name}}</td> 11 <!-- JOSN中的年齡 --> 12 <td>{{item.age}}</td> 13 <!-- JOSN中的性別 --> 14 <td>{{item.sex}}</td> 15 </tr> 16 </table> 17 18 </div> 19 <script src = "js/vue.js"></script> 20 <script> 21 var vue = new Vue({ 22 el: "#app", 23 data: { 24 obj: [ 25 {name:'張三',age: '17',sex:'男'}, 26 {name:'李四',age: '18',sex:'女'}, 27 {name:'王五',age: '19',sex:'男'}, 28 {name:'趙六',age: '20',sex:'男'} 29 ] 30 } 31 }) 32 33 </script>
此時瀏覽器就可以加載出：
v-for還可以進行嵌套
比如，我們用v-if實現九九乘法表：
1 <body> 2 <div id="app"> 3 <table> 4 <tr v-for="i in number" :key="i"> 5 <td v-for="j in i" :key="j">{{i}}X{{j}}={{i*j}}</td> 6 </tr> 7 </table> 8 </div> 9 <script src = "js/vue.js"></script> 10 <script> 11 var vue = new Vue({ 12 el: "#app", 13 data: { 14 number:[1,2,3,4,5,6,7,8,9] 15 } 16 }) 17 </script> 18 </body>
注意：
<1>v-for遍歷的出來的不是數據，而是元素
<2>如果使用item和index的時候一定要使用括號包裹起來