The V-for iteration loop in Vue

1. Iterate over the array

V-for ='(item[, I]) in arr’ v-for='(item[, I]) in arr’ v-for='(item[, I]) in arr’

< div id = "app" > < h3 v - for = '(item, I) in arr' > value is: {{item}} - > index value is: {{I}} < / h3 > < / div > < script > var = new vm Vue ({el: '#app', data: { arr:[0, 1, 2, 3, 4] }, methods:{ } }) </script>Copy the code

The results are as follows:

2. Iterate over objects

V-for ='(value,key[, I]) in obj’ v-for='(value,key[, I]) in obj’

< div id = "app" > < h3 v - for = '(the value, the key, I) in obj' > key is: {{key}} - > value is: {{value}} - > index value is: {{i}}</h3> </div> <script> var vm = new Vue({ el: '#app', data: { obj:{ id:1, name:'zhangsan', age:18, } }, methods:{ } }) </script>Copy the code

The results are as follows:

3. Iterate over an array of objects

V -for='(item[, I]) in objarr’ v-for='(item[, I]) in objarr’

< div id = "app" > < h3 v - for = '(user, I) in objarr' > {{. User id}}, {{user. The name}} - > index value is: {{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>Copy the code

The results are as follows:

Iterate over numbers

V -for='(value[, I]) in number’ v-for='(value[, I]) in number’

< div id = "app" > < h3 v - for = '(number, I) in 5' > value is: {{number}} - index: {{I}} < / h3 > < / div >Copy the code

The results are as follows:

Note: