master

分支 (1)

管理

管理

master

learn-vue
/
demo_009.html

<!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="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用最笨的办法来遍历整个list -->
        {{list[0].id}} - {{list[0].name}} <br />
        {{list[1].id}} - {{list[1].name}} <br />
        {{list[2].id}} - {{list[2].name}} <br />
        {{list[3].id}} - {{list[3].name}} <br />
        {{list[4].id}} - {{list[4].name}} <br />

        <hr />

        <!-- 使用v-for，遍历json对象数组 -->
        <div v-for="item in list">
            {{item.id}} - {{item.name}} <br />
        </div>

        <!-- 使用v-for，遍历普通数组 -->
        <ul>
            <li v-for="(item, index) in arr">
               第{{index + 1}}个元素是： {{item}}
            </li>
        </ul>

        <!-- 使用v-for，遍历一个对象中的所有属性 -->
        <p v-for="(value, key, index) in user">
            {{key}}: {{value}}  {{index}}
        </p>

        <!-- 使用v-for，循环数字 -->
        <marquee v-for="n in 5">
            {{n}}
        </marquee>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              list: [
                  {id: 1, name: '关羽'},
                  {id: 2, name: '张飞'},
                  {id: 3, name: '赵云'},
                  {id: 4, name: '马超'},
                  {id: 5, name: '黄忠'},
              ],
              arr: [11,22,33,44,55],
              user: {
                  uid: 1001,
                  name: "岳不群",
                  age: 24,
                  address: "华山派"
              }
            }
        });
    </script>
</body>
</html>