概述

循环使用 v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

如果要限制遍历的数量，则格式为：site in sites.slice(0,3)，3为数量代表只遍历3个

迭代数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <div>
        <p v-for="student in students">
            {{student.name}}的年龄：{{student.age}}
        </p>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            students: [
                {name: 'Tom', age: 14},
                {name: 'Mary', age: 12},
                {name: 'Sherry', age: 15}
            ]
        }
    })
</script>

img

迭代对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <p v-for="(value,key,index) in student">
        {{index}}---{{key}}:{{value}}
    </p>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            student: {
                name: 'Tom',
                age: 14,
                sex: '男'
            }
        }
    })
</script>

img

迭代整数

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <p>遍历1到<span>{{num}}</span>:</p>
    <span v-for="n in num" v-if="n<num">{{n}}，</span>
    <span v-else>{{num}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            num:33
        }
    })
</script>

img