Vue学习（五）：列表渲染 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
</head>
<body>
<!--1.数组迭代-->
<div id="example1">
    <ul>
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
    <!--第二个参数为索引-->
    <ul>
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>
</div>

<!--2.对象迭代-->
<div id="example2">
    <!--第一个参数为属性值-->
    <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>

<!--3.在使用 v-for 时提供 key-->
<!--2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的-->
<div id="example3">
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.message }}
        </li>
    </ul>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
    let vm1 = new Vue({
        el: '#example1',
        data: {
            parentMessage: 'Parent',
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    });

    let vm2 = new Vue({
        el: '#example2',
        data: {
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
    });

    let vm3 = new Vue({
        el: '#example3',
        data: {
            items: [
                {
                    id: 1,
                    message: 'Foo'
                },
                {
                    id: 2,
                    message: 'Bar'
                }
            ]
        }
    })
</script>
</body>
</html>

 

posted @ 2018-12-11 14:26  寒爵  阅读(282)  评论(0)    收藏  举报