Vue.js循环语句

Vue.js循环语句

v-for

基本迭代

html 代码

<div id="app">
    <ul v-for="item in items">
        <li>{{ item.name }}</li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            items:[
            {name:'item1'},
            {name:'item2'},
            {name:'item3'}
            ]
        }
    })
</script>

v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。

模板迭代

html 代码

<div id="app">
    <ul v-for="item in items">
        <li>今天是{{ message }} -- {{ item.name }}</li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            message:'星期',
            items:[
            {name:'一'},
            {name:'二'},
            {name:'三'},
            {name:'四'},
            {name:'五'},
            {name:'六'},
            {name:'日'}
            ]
        }
    })
</script>

对象迭代

html 代码

<div id="app">
    <ul v-for="(value,key,index) in object">
        <li>{{value}}--{{key}}--{{index}}</li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            object:{
                name:'张三',
                age:'22',
                sex:'男'
            }
        }
    })
</script>

其中，第一个参数为值，第二个参数为键名，第三个参数为索引。

整数迭代

html 代码

<div id="app">
    <ul v-for="num in 10">
        <li>{{num}}</li>
    </ul>
</div>