首页 > 编程语言 > 详细

vue学习(十) v-for循环普通数组 、对象数组、 迭代数字

时间:2019-05-03 17:49:12      阅读:186      评论:0      收藏:0      [点我收藏+]
//html
<div id="app">
 <p v-for="item in list">{{item}}</p>
 <p v-for="(item, i) in list">索引{{i}}---值{{item}}</p>
 <p v-for="user in list2">id是{{user.id}}---名字是{{user.name}} </p>
 <p v-for="(user,i) in list2">id是{{user.id}}---名字是{{user.name}}---索引是{{i}}</p>
 //遍历对象身上的属性和值,除了有key value 在第三个位置上还有一个索引
 <p v-for="(key,value,i) in user">键是{{key}}---值是{{value}}---索引是{{i}}</p>
 
 //迭代数字 迭代从1开始
<p v-for="count in 10">这是第{{count}}次循环</p> </div> //script <script>   var vm = new Vue({     el:app,     data:{       list:[1,2,3,4,5,6,7],
      list2:[
        { id:1, name:‘小白‘ },
        { id:2, name:‘小黑‘ },
        { id:3, name:‘小黄‘ }
      ],
      user:{
        id:1,
        name:‘小红‘,
        gender:‘女‘
      }
    },     methods:{//methods中定义了当前vue实例中所有可用的方法           }   }) </script>

 

vue学习(十) v-for循环普通数组 、对象数组、 迭代数字

原文:https://www.cnblogs.com/xuchao0506/p/10805726.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!