vue---列表渲染

列表循环v-for（最基础的数组）

    <body>
        <div id="app">
            <ul>
                <li v-for="item in stars">
                    {{item}}
                </li>
            </ul>
        </div>
        <script type="text/javascript" >
            var app=new Vue({
                el:"#app",
                data:{
                    stars:["蔡徐坤","吴亦凡","黄子韬","鹿晗"]
                }
            })
        </script>
    </body>

列表循环v-for（对象）

<body>
        <div id="app">
            <ul>
                <li v-for="item,key in students">
                    <h4>索引值：{{key}}---{{item.studentName}}</h4>
                    <p>年龄：{{item.age}}-----学校：{{item.school}}</p>
                </li>
            </ul>
        </div>
        <script type="text/javascript" >
            var app=new Vue({
                el:"#app",
                data:{
                    students:[
                        {
                            studentName:"小明",
                            age:16,
                            school:"清华"
                        },
                        {
                            studentName:"小红",
                            age:17,
                            school:"北大"
                        },
                        {
                            studentName:"小华",
                            age:18,
                            school:"浙大"
                        }
                    ]
                }
            })
        </script>
    </body>

列表循环v-for（对象内循环）

<body>
<div id="app">
            <ul>
                <li v-for="item,key in students[0]">
                    key:{{key}}---value:{{item}}
                </li>
            </ul>
        </div>
        <script type="text/javascript" >
            var app=new Vue({
                el:"#app",
                data:{
                    students:[
                        {
                            studentName:"小明",
                            age:16,
                            school:"清华"
                        },
                        {
                            studentName:"小红",
                            age:17,
                            school:"北大"
                        },
                        {
                            studentName:"小华",
                            age:18,
                            school:"浙大"
                        }
                    ]
                }
            })
        </script>
    </body>

列表+条件循环（找出年龄为偶数的学生）

<body>
        <div id="app">
            <ul>
                <li v-for="item,key in students" v-if="item.age%2==0">
                    <h4>索引值：{{key}}---{{item.studentName}}</h4>
                    <p>年龄：{{item.age}}-----学校：{{item.school}}</p>
                </li>
            </ul>
        </div>
        <script type="text/javascript" >
            var app=new Vue({
                el:"#app",
                data:{
                    students:[
                        {
                            studentName:"小明",
                            age:16,
                            school:"清华"
                        },
                        {
                            studentName:"小红",
                            age:17,
                            school:"北大"
                        },
                        {
                            studentName:"小华",
                            age:18,
                            school:"浙大"
                        }
                    ]
                }
            })
        </script>
    </body>

猜你喜欢