v-for

1、遍历数组

 1 <div id="app">
 2   <p v-for="item in items">my name is {{item}}</p>
 3 </div>
 4 <script>
 5   var app = new Vue({
 6     el:'#app',
 7     data:{
 8       items:[
 9         'Tom',
10         'Jack',
11         'Mickey'
12       ]
13     }
14   })
15 </script>

2、遍历带索引的数组

 1 <div id="app">
 2   <p v-for="(item, index) in items">the {{index+1}}th boy is {{item}}</p>
 3 </div>
 4 <script>
 5   var app = new Vue({
 6     el:'#app',
 7     data:{
 8       items:[
 9         'Tom',
10         'Jack',
11         'Mickey'
12       ]
13     }
14   })
15 </script>

3、遍历对象

 1 <div id="app">
 2   <p v-for="(val, key) in object">{{key}}--{{val}}</p>
 3 </div>
 4 <script>
 5   var app = new Vue({
 6     el:'#app',
 7     data:{
 8       object:{
 9         name:'Tom',
10         age:'25',
11       }
12     }
13   })
14 </script>

4、遍历带索引的对象

 1 <div id="app">
 2   <p v-for="(val, key, index) in object">{{index+1}}--{{key}}--{{val}}</p>
 3 </div>
 4 <script>
 5   var app = new Vue({
 6     el:'#app',
 7     data:{
 8       object:{
 9         name:'Tom',
10         age:'25',
11       }
12     }
13   })
14 </script>

5、当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。

 1 <div id="app">
 2   <p v-for="item in items" :key="item.id">{{ item.text }}</p>
 3 </div>
 4 <script>
 5   var app = new Vue({
 6     el:'#app',
 7     data:{
 8       items:[
 9         {
10           text:'Tom'
11         },
12         {
13           text:'Jack'
14         },
15         {
16           text:'Mickey'
17         }
18       ]
19     }
20   })
21 </script>