VUE(3)——循环

最新推荐文章于 2025-04-02 17:21:38 发布

原创最新推荐文章于 2025-04-02 17:21:38 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#VUE

web前端同时被 2 个专栏收录

10 篇文章

订阅专栏

VUE

5 篇文章

订阅专栏

<body>
    <div id="app">
        <ul>
            <template v-for="site in sites">
                <li>{{site.name}}</li>
                <li>---</li>
            </template>
        </ul>
        <br>
        <!--v-for迭代对象-->
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
        <br>
        <!--第二个参数为键名-->
        <ul>
            <li v-for="(value,key) in object2">
                {{key}}:{{value}}
            </li>
        </ul>
        <!--第三个参数为索引-->
        <ul>
            <li v-for="(value,key,index) in object2">
                {{index}}.{{key}}:{{value}}
            </li>
        </ul>
        <br>
        <!--v-for迭代整数-->
        <ul>
            <li v-for="n in 10">
                {{n}}
            </li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                sites:[
                    {name:'ranboo'},
                    {name:'study'},
                    {name:'learn'}
                ],
                object:{
                    name:'菜鸟教程',
                    url:'www.baidu.com',
                    slogan:'好好学习'
                },
                object2:{
                    name:'菜鸟教程',
                    url:'www.baidu.com',
                    slogan:'好好学习'
                }
            }
        })
    </script>
</body>