vue中v-for说明

v-if vs v-show区别
v-if：每次显示与否，都会执行销毁和重建，渲染开销较大
v-show：始终会被渲染并保留在DOM中。只是简单地切换display属性。
频繁切换的时候用v-if,较少切换用v-if

注意：不推荐同时使用 v-if 和 v-for

<ul id="example-1">
    <li v-for="item in items">
    {{ item.message }}
    </li>
</ul>

在v-for中使用数组

在 v-for 块中，我们可以访问所有父作用域的属性

<ul id="example-2">
    <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>
var example2 = new Vue({
    el: '#example-2',
    data: {
        parentMessage: 'Parent',
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
                    ]
            }
})                

 

在v-for中使用对象

<ul id="v-for-object" class="demo">
    <li v-for="value in object">
    {{ value }}
    </li>
</ul>
new Vue({
    el: '#v-for-object',
    data: {
    object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
            }
        }
})    

也可以提供第二个的参数为 property 名称
<div v-for="(value, name) in object">
　　{{ name }}: {{ value }}
</div>
尽可能在使用 v-for 时提供 key 属性
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>