<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 遍历对象的属性,会取出属性名和属性值 -->
        <!-- 属性名在后,属性值在前 -->
        <ul>
            <li v-for="value,propName in user">{{propName}}={{value}}</li>
        </ul>
        <!-- 遍历字符串 -->
        <!-- 会取出字符串的每一个字符和下标,字符在前,下标在后 -->
        <ul>
            <li v-for="s,index in str">{{index}}{{s}}</li>
        </ul>
        <!-- 遍历指定的次数怎么操作 -->
        <!-- 左边是次数,右边是下标 -->
        <ul>
            <li v-for="(num,index) of counter">
                {{num}},{{index}}
            </li>
        </ul>
        <h1>{{msg}}</h1>
        <!-- 静态列表 -->
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
        <!-- 动态列表 -->
        <ul>
            <!-- v-for要写在循环项上 -->
            <li v-for="name in names">{{name}}</li>
        </ul>
        <!-- 用in和of效果是一样的 -->
        <ul>
            <!-- v-for要写在循环项上 -->
            <!-- v-for="变量名,下标 in/of 变量" -->
            <!-- 变量名代表每一个元素 -->
            <li v-for="name,x of names">{{x}}:{{name}}</li>
        </ul>
        <ul>
            <li v-for="vip,index in vips">
                序列号:{{index}}
                会员名:{{vip.username}}
                id:{{vip.id}}
                年龄:{{vip.age}}
            </li>
        </ul>
        <table>
            <tr>
                <th>序列号</th>
                <th>会员名</th>
                <th>id</th>
                <th>年龄</th>
                <th>选择</th>
            </tr>
            <tr v-for="vip,index in vips">
                <td>{{index}}</td>
                <td>{{vip.username}}</td>
                <td>{{vip.id}}</td>
                <td>{{vip.age}}</td>
                <td><input type="checkbox"/></td>
            </tr>
        </table>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                names : ["Jack","Rose","James"],
                vips : [
                    {username : "Jack",id : 1,age : 20},
                    {username : "Rose",id : 2,age : 20},
                    {username : "James",id : 3,age : 20}
                ],
                user : {
                    id : "111",
                    name : "Jack",
                    age : 25
                },
                str : "狂人日记鲁迅",
                counter : 10
            }
        });
    </script>
</body>
</html>