码迷,mamicode.com
首页 > 其他好文 > 详细

v-for 指令

时间:2019-01-12 19:03:19      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:bsp   div   info   inf   val   turn   数组   技术   var   

JS部分:

 1 var app = new Vue({
 2           el: "#app",
 3           data() {
 4               return {
 5                   list: [1, 2, 3, 4],
 6                   objList: [
 7                       { id: 1, name: ‘Tome‘ },
 8                       { id: 2, name: ‘Jack‘ },
 9                       { id: 3, name: ‘France‘ },
10                   ],
11                   obj: { id: 1, name: ‘checky‘, gender: ‘mele‘, age: 18 }
12               }
13           }
14 });

 

一、循环数组

1 <ul>
2      <li v-for="item in list">
3           {{item}}
4       </li>
5  </ul>

结果:

技术分享图片

 

二、循环对象数组

 

1 <ul>
2     <li v-for="(obj,i) in objList">
3          {{obj.id}} - {{obj.name}} - {{i}}
4      </li>
5 </ul>            

结果:

技术分享图片

三、遍历对象

 

1 <!-- 在便利对象的键值对时,有val、key、index -->
2 <p v-for="(value,key,index) in obj">
3      {{index}}:{{key}} : {{value}}
4 </p>

结果:

技术分享图片

 

四、迭代数字

1 <!-- 用v-for迭代数字,count从1开始 -->
2 <p v-for="count in 10"> 这是第几次{{count}}此循环</p>

结果:

技术分享图片

 

v-for 指令

标签:bsp   div   info   inf   val   turn   数组   技术   var   

原文地址:https://www.cnblogs.com/chenzongyan/p/10260565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!