美文网首页
Vue学习-for循环

Vue学习-for循环

作者: 爱学习的代代 | 来源:发表于2020-05-19 08:55 被阅读0次

    for循环:使用v-for

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ol>
                <li v-for="(value, key, index) in object">
                     {{index}} --------- {{key}}: {{value}}
                </li>
    
                <li v-for="n in 10">
                    {{n}}
                </li>
            </ol>
        </div>
    
        <script>
            new Vue({
                el: '#app',
                data: {
                    object: {
                        name: "daidai",
                        url: "wwww.daidai.com",
                        slogan: "每天进步一点点"
                    }
                }
            })
        </script>
        
    </body>
    </html>
    

    1、遍历数组,对于元素需要使用v-for且遵循类似于site in sites语法 sites表示数组名

    <div v-for="site in sites">
        {{site}}
    </div>
    

    2、遍历字典(对象)

    <div v-for="(value, key, index) in dict">
    </div>
    

    3、遍历整数

    <div v-for="n in 10">
    </div>
    

    相关文章

      网友评论

          本文标题:Vue学习-for循环

          本文链接:https://www.haomeiwen.com/subject/nqrvohtx.html