美文网首页
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