webveuje/vue/循环渲染.md

循环渲染

v-for 遍历数组

语法：

​ v-for="(item,index) in arr" :key="index"

​ arr是被渲染的数组，item是被迭代的数组元素的别名 ， index 指代数组的索引值

示例：

 <div v-for="(item,index) in arr" :key="index">
      第{{index}} 个元素  值为{{item}}
 </div>
 
 变体：
  <div v-for="(i,j) in pics" :key="j">
      第{{j}} 个元素  值为{{i}}
 </div>

var app = new Vue({
            el: '#app',
            data: {
               arr:['a','b','c','d','e']
            },
        })

效果如下：

v-for 遍历对象的属性

语法：

​ v-for="(item,index) in obj" :key="index"

obj 是要遍历的对象 item 指代的是对象的值 index 指代的是对象的键

示例：

 <div v-for="(item,index) in obj" :key="index">
      键为index  值为{{item}}
 </div>

var app = new Vue({
    el: '#app',
    data: {
        obj: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
        }
    },
})

效果如下：

v-for 遍历范围值

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>