【Vue2.0学习】—条件渲染（三十九）

【Vue2.0学习】—条件渲染（三十九）

一、v-for指令
1、用于展示数据的列表
2、语法：​​​v-for="(item,index)" in XXX :key="yyyy"​​ 3、可遍历数组、对象、字符串、指定次数

<div id="root">
        <h2>人员列表</h2>
        <ul>
            <!-- <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> -->
            <li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li>
        </ul>
        <br>
        <br>
        <hr>
        <!-- 遍历对象 -->
        <h2>汽车列表</h2>
        <ul>

            <li v-for="(value,key) of cars" :key="key">{{key}}-{{value}}</li>
        </ul>
        <br>
        <br>
        <hr>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>

            <li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li>
        </ul>

        <br>
        <br>
        <hr>
        <!-- 遍历指定的次数 -->
        <h2>遍历指定的次数</h2>
        <ul>

            <li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: [{
                    id: '001',
                    name: '张三',
                    age: 18
                }, {
                    id: '002',
                    name: '李四',
                    age: 19
                }, {
                    id: '003',
                    name: '王五',
                    age: 20
                }],
                cars: {

                    name: '奥迪',
                    color: '白色',
                    price: '200万'
                },
                str: 'helloworld'

            }
        })
    </script>

二、key的作用与原理