vue指令v-for示例解析

1、遍历数组

 <div id="app">
   <p v-for="item in items">my name is {{item}}</p>
 </div>
 <script>
   var app = new Vue({
     el:'#app',
     data:{
       items:[
         'Tom',
         'Jack',
         'Mickey'
       ]
     }
   })
 </script>

2、遍历带索引的数组

 <div id="app">
   <p v-for="(item, index) in items">the {{index+1}}th boy is {{item}}</p>
 </div>
 <script>
   var app = new Vue({
     el:'#app',
     data:{
       items:[
         'Tom',
         'Jack',
         'Mickey'
       ]
     }
   })
 </script>

3、遍历对象

 <div id="app">
   <p v-for="(val, key) in object">{{key}}--{{val}}</p>
 </div>
 <script>
   var app = new Vue({
     el:'#app',
     data:{
       object:{
         name:'Tom',
         age:'25',
       }
     }
   })
 </script>

4、遍历带索引的对象

 <div id="app">
   <p v-for="(val, key, index) in object">{{index+1}}--{{key}}--{{val}}</p>
 </div>
 <script>
   var app = new Vue({
     el:'#app',
     data:{
       object:{
         name:'Tom',
         age:'25',
       }
     }
   })
 </script>

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

 <div id="app">
   <p v-for="item in items" :key="item.id">{{ item.text }}</p>
 </div>
 <script>
   var app = new Vue({
     el:'#app',
     data:{
       items:[
         {
           text:'Tom'
         },
         {
           text:'Jack'
         },
         {
           text:'Mickey'
         }
       ]
     }
   })
 </script>

巴特西

vue指令v-for示例解析

最新文章

热门文章