1.v-for loop ordinary arrays
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- <p>{{list[0]}}</p> 15 <p>{{list[1]}}</p> 16 <p>{{list[2]}}</p> 17 <p>{{list[3]}}</p> 18 <p>{{list[4]}}</p> --> 19 20 <p v-for="(item,i) in list">索引值：{{i}}---每一项：{{item}}</p> 21 </div> 22 23 24 < Script > 25 // Create Vue instance, to give the ViewModel 26 is var VM = new new Vue ({ 27 EL: ' #app ' , 28 Data: { 29 List: [ . 1 , 2 , . 3 , . 4 , . 5 , . 6 ] 30 }, 31 is Methods: {} 32 }); 33 is </ Script > 34 is </ body > 35 </html>
2.v-for loop object array
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </Script > 10 </ head > . 11 12 is < body > 13 is < div ID = "App" > 14 < P V-for = "(User, I) in List" > Id: {{}} --- the user.id name: {{user.name}} --- index: {{I}} </ P > 15 </ div > 16 . 17 18 is < Script > . 19 // Create Vue instance, to give the ViewModel 20 is var VM = new new Vue ( { 21 is EL: '#app', 22 data:{ 23 list:[ 24 {id:1,name:'zs1'}, 25 {id:2,name:'zs2'}, 26 {id:3,name:'zs3'}, 27 {id:4,name:'zs4'} 28 ] 29 }, 30 methods:{} 31 }); 32 </script> 33 </body> 34 </html>
3.v-for cyclic object
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </Script > 10 </ head > . 11 12 is < body > 13 is < div ID = "App" > 14 <-! Note: when the object traversing of the key body, in addition val key, the third position also an index -> 15 < P V-for = "(Val, key, I) in User" > values are: {{val}} --- bond are: {{key}} --- {{index }} I </ P > 16 </ div > . 17 18 is . 19 < Script > 20 is // Create Vue instance, to give the ViewModel 21 is var VM = new Vue({ 22 el:'#app', 23 data:{ 24 user:{ 25 id:1, 26 name:'安迪', 27 gender:'男' 28 } 29 }, 30 methods:{} 31 }); 32 </script> 33 </body> 34 </html>
4.v-for iterative digital
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </Script > 10 </ head > . 11 12 is < body > 13 is < div ID = "App" > 14 <-! in later let us ordinary arrays, an array of objects, objects can put a digital -> 15 <! - - Note: If v-for the number of iterations, then in front of the count value from the beginning. 1 -> 16 < P v-for = "count in 10" > this is the first {{count}} cycles </ P > . 17 </ div > 18 is . 19 20 is < Script > 21 // create Vue instance, get ViewModel 22 var vm = new Vue({ 23 el:'#app', 24 data:{ 25 msg:'' 26 }, 27 methods:{} 28 }); 29 </script> 30 </body> 31 </html>