v-for

 

1、v-for遍历数组

<div id="demo">
    <ul>
        <li v-for="i in names">{{i}}</li>
    </ul>
    <!-- 使用下标值（索引值） -->
    <ul>
        <li v-for="(item,index) in names">{{index+1}} : {{item}}</li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            message: 'v-for遍历数组',
            names:['rocke','jerry','malier','coco'],
        }
    });
</script>

2、v-for遍历对象

<div id="demo">
    <!-- 在遍历对象的时候，只获取一个值，获取的是value  -->
    <ul>
        <li v-for="i in person">{{i}}</li>
    </ul>
    <hr/>
    <!-- 获取key和value时，value在前面，key在后面 -->
    <ul>
        <li v-for="(value,key) in person">{{key}}：{{value}}</li>
    </ul>
    <!-- 获取key、value和index -->
    <hr>
    <ul>
        <li v-for="(value,key,index) in person">{{index}}：{{key}}：{{value}}</li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            message: '',
            person:{
                name:'rocke',
                age: 22,
                height:178,
                weight:145,
            }
        }
    });
</script>

 

3、使用建议

推荐我们在使用v-for的时候，给对应的元素或组件添上一个key属性。

key的作用主要是为了高效的更新虚拟DOM。