Vue v-for 用法

<div id="app">
            <h3>明细列表</h3>
            <ul>
                <li v-for="item in stars">
                    {{item}}
                </li>
            </ul>
            <h3>学生列表</h3>
            <ul>
                <li v-for="item in students">
                    <h4>学生姓名 : {{item.studentName}}</h4>
                    <h4>年龄 : {{item.age}}</h4>
                    <h4>学校 :{{item.school}}</h4>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    stars:["蔡徐坤姐姐","范冰冰姐姐","林志玲姐姐"],
                    students:[
                        {
                        studentName:"小明",
                        age:16,
                        school:"北大"
                    },
                    {
                        studentName:"小白",
                        age:19,
                        school:"哈大"
                    },
                    {
                        studentName:"小黑",
                        age:10,
                        school:"新大"
                    },
                    ],
                    
                    
                }
            })
        </script>

输出结果 :

 

 

 

 

posted @ 2022-01-06 16:00  GGFWI  阅读(36)  评论(0)    收藏  举报