<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div id="v-for">
            <h1> 循环 v-for:</h1>
 <h2> 遍历数组</h2>
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
            <ul>
                <template v-for="site in sites">
                    <li>{{ site.name }}</li>
                    <li>--------------</li>
                </template>
            </ul>
 <h2>      遍历对象</h2>

            <ul>
                <li v-for="value in object">
                    {{ value }}
                </li>
            </ul>
            <ul>
                <li v-for="(value, key) in object">
                    {{ key }} : {{ value }}
                </li>
            </ul>
            <ul>
                <li v-for="(value, key, index) in object">
                    {{ index }}. {{ key }} : {{ value }}
                </li>
            </ul>

            <div v-for="(value,key) in person" :key="key">
                <p>value:{{value}}, key:{{key}}</p>
            </div>
            <ul>
                <li v-for="n in 10">
                    {{ n }}
                </li>
            </ul>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                seen: true,
                ok: true,
                todos: [
                    { text: '学习 JavaScript' },
                    { text: '学习 Vue' },
                    { text: '整个牛项目' }
                ],
                sites: [
                    { name: 'Runoob' },
                    { name: 'Google' },
                    { name: 'Taobao' }
                ],
                object: {
                    name: 'v-for object',
                    url: 'http://www.baidu.com',
                    slogan: '学的不仅是技术,更是梦想!'
                },
                person: {
                    name: 'leslie',
                    aka: '荣光无限'
                }
            },
        })
    </script>
</body>

</html>