一、 v-for指令

1、用于展示列表数据；
2、语法：v-for="(item,index) in xxx"  :key="yyy"；
3、可遍历：数组，对象，字符串（用的很少）、指定次数（用的很少）；
4、你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。

二、可遍历对象示例


<html>
    <head>
        <title>基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 1、遍历数组 -->
            <h2>人员列表</h2>
            <ul>
                <!-- <li v-for="p in persons" :key="p.id"> -->
                <li v-for="(p,index) in persons" :key="index">
                    {{p.name}}-{{p.age}}
                </li>
            </ul>
            <!-- 2、遍历对象 -->
            <h2>汽车信息</h2>
            <ul>
                <!-- <li v-for="(a,b) in car">{{a}}----{{b}}---</li> -->
            <!--
                结果为：
                奥迪A3----name---
                120万----price---
                白色----color---
            -->
                <li v-for="(value,key) in car" :key="key">{{key}}----{{value}}--</li>
            <!--
                结果为：
                name----奥迪A3--
                price----120万--
                color----白色--
            -->
            </ul>
            <!-- 3、遍历字符串（用的少）-->
            <h2>测试遍历字符串</h2>
            <ul>
                <li v-for="(char,index) of str">{{char}}----{{index}}</li>
            <!--
                结果为：
                h----0
                e----1
                l----2
                l----3
                o----4
            -->
            </ul>
            <!-- 4、遍历指定次数（用的少） -->
            <h2>遍历指定次数</h2>
            <ul>
                <li v-for="(a,b) in 5">{{a}}--{{b}}</li>
            <!--
                结果为：
                1--0
                2--1
                3--2
                4--3
                5--4
            -->
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const v =new Vue({
                el:'#root',
                data:{
                    persons:[
                        {id:'001',name:'张三',age:'12'},
                        {id:'002',name:'李四',age:'24'},
                        {id:'003',name:'王五',age:'33'}
                    ],
                    car:{
                        name:'奥迪A3',
                        price:'120万',
                        color:'白色'
                    },
                    str:'hello'
                }
            })
        </script>
    </body>
</html>