挑战百日学习计划(小程序开发:www.zkelm.com)-第六天(v-for)

挑战百日学习计划，为自己做 【小程序开发：www.zkelm.com 】
做技术积累，人没有梦想不足于慰平生。 准备先攻克前端，后进军ai 和单片机 ，以下都是我一个一个代码敲的实例， 希望对大家有帮助，写得不是很好 ，大神请飘过

Vue v-for 循环 (常用于循环 数组 or 对象 )

1.循环数组

<div id="app">
   <ul>
    <li v-for="(value,index) in sites">{{index}}:{{value}}</li>
   </ul>
</div>
<script>
new Vue({
   el:"#app",
   data:{
      sites:[11,22,33,44,55,66,77,88,99]
    }
})
</script>

数组的下标index 其实都是 0 1 2 3 4 5 这样子排序
所以[index][value] 则会输出 0：value的值
运行的结果：

2.循环对象

<div id="app">
    <ul>
      <li v-for="(value,index,key) in MyArr">{{key}}:{{index}}:{{value}}</li>
    </ul>
</div>
<script>
  new Vue({
      el:"#app",
      data:{
          MyArr:{
              name:'chenqi518',
              age:24,
              hobby:'小程序开发',
              url:'http://www.zkelm.com'
            }
      }

   })
</script>

运行结果：