VUE(3)——循环

最新推荐文章于 2024-01-05 23:47:18 发布

月不留名

最新推荐文章于 2024-01-05 23:47:18 发布

阅读量266

点赞数

分类专栏： VUE web前端文章标签： VUE

本文链接：https://blog.csdn.net/weixin_42392456/article/details/81330289

版权

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

10 篇文章 0 订阅

订阅专栏

VUE

5 篇文章 0 订阅

订阅专栏

<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>

月不留名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE(3)——循环

&lt;body&gt; &lt;div id="app"&gt; &lt;ul&gt; &lt;template v-for="site in sites"&gt; &lt;li&gt;{{site.name}}&lt;/li&gt; &lt;li&am
复制链接

扫一扫