Vue.js 循环语句

循环使用 v-for 指令。

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

迭代数组

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

迭代对象

第一个参数是value，第二个参数属性key，第三个参数序号index的顺序必须严格对应

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

迭代整数

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