让你更了解v-for迭代循环

Vue中的v-for迭代循环

1,迭代数组

定义格式如下：
v-for=’(item[,i]) in arr’
说明： item表示值，i表示索引，为可选项，arr是被迭代数组
  主要代码演示如下：

 <div id="app">
        <h3 v-for='(item,i) in arr'>值为：{{ item }}--->索引值为：{{i}}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                arr:[0, 1, 2, 3, 4]
            },
            methods:{
            }
        })
    </script>

结果如下：

2.迭代对象

定义格式如下：
v-for=’(value,key[,i]) in obj’
说明： value表示值，key表示键，i表示索引，为可选项，obj是被迭代数组
  主要代码演示如下：

<div id="app">
        <h3 v-for='(value, key, i) in obj'>键为：{{key}}----->值为：{{ value }}---->索引值为：{{i}}</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                obj:{
                    id:1,
                    name:'zhangsan',
                    age:18,
                }
            },
            methods:{
            }
        })
    </script>

结果如下：

3.迭代对象数组

v-for=’(item[,i]) in objarr’
说明： item表示值，i表示索引，为可选项，objarr是被迭代数组
  主要代码演示如下：

 <div id="app">
        <h3 v-for = '(user,i) in objarr'>{{user.id}}--{{user.name}}---->索引值为：{{i}}</h3> -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                objarr:[
                    {id:1,name:"zhangsan"},
                    {id:2,name:"lisi"},
                    {id:3,name:"wangwu"},
                ]
            },
            methods:{
            }
        })
    </script>

结果如下：

4.迭代数字

定义格式如下：
v-for=’(value[,i]) in number’
说明： value表示值,i表示索引，为可选项，number是被迭代数组
  主要代码演示如下：

  <div id="app">
        <h3 v-for = '(number,i) in 5'>值为：{{number}}---索引：{{i}}</h3>
    </div>

结果如下：

注意： 当迭代数字时，值是从1开始的，索引是从0开始的。