Vue之列表渲染（一）

<div id="root">
        <h2>遍历数组</h2>
        <ul>
            <!-- key是特殊的标签属性 -->
            <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
        <hr>
        <h2>遍历对象</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}--{{value}}
            </li>
        </ul>
        <hr>
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{char}}--{{index}}
            </li>
        </ul>
        <hr>
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{number}}--{{index}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:"001",name:"张三",age:13},
                    {id:"002",name:"李四",age:14},
                    {id:"003",name:"王五",age:15}
                ],
                car:{
                    name:"奥迪6",
                    price:"70w",
                    color:"蓝色",
                },
                str:'hello',
            }
        })
    </script>

效果如下：遍历字符串和指定遍历次数不常用，了解即可。注意of遍历，顺序要反过来。