列表渲染(基本列表v-for)

<div id="root">

        <!-- 数组遍历 -->
        <h2>人员列表</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <!-- 对象遍历 -->
        <h2>汽车信息</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(k,value) in car" :key="value">
                {{value}}-{{k}}
            </li>
        </ul>

        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(char,index) in str" :key="index">
                {{index}}-{{char}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>遍历次数</h2>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(number,index) in 5" ::key="index">
                {{index}}-{{number}}
            </li>
        </ul>

    </div>
    <script type="text/javascript">

        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                persons: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 },
                ],
                car: {
                    name: '宝马x5',
                    money: '65万',
                    color: 'black'
                },
                str: 'hello'
            }
        })
    </script>