Vue列表渲染 - 半亩花田i

gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson03

一 v-for循环数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index1</title>
    <style>
        li{
            font-size:25px;
            list-style:none;
        }
    </style>
</head>
<body>
<div id="app1">
    <!--v-for循环数组-->
    <ul>
        <li v-for="item in listData">{{item.message}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in listData">  <!--第二个参数：可选参数，index:当前项的索引-->
            <span>{{index}}</span>
            <span>{{item.message}}</span>
        </li>
    </ul>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app1',
        data:{
            listData: [   /*注意：listData是一个数组*/
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    });
</script>
</html>

输出结果：Foo Bar ，0 Foo 1 Bar

注意：也可以用of替代in作为分隔符，因为他是最接近javascript迭代器的语法。

一 v-for循环对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index3</title>
    <style>
        li{
            font-size:25px;
            list-style:none;
        }
    </style>
</head>
<body>
<div id="app2">
    <!--v-for循环对象-->
    <ul>
        <li v-for="(item,key,index) in listData">    <!--第二个参数为键名 第三个参数为索引-->
            <span>{{key}}:</span>
            <span>{{item}}</span>
        </li>
    </ul>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app2',
        data:{
            listData: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }

        }
    });
</script>
</html>

输出结果：firstName: John，lastName: Doe，age: 30

posted on 2018-12-03 14:50 半亩花田i 阅读(184) 评论(0) 编辑收藏举报