Vue中v-for属性
一、遍历数组对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p v-for="(item,i) in list"> id：{{item.id}}-----姓名：{{item.name}}-----当前索引：{{i}}</p> 11 </div> 12 <script type="text/javascript"> 13 var vm = new Vue({ 14 el: "#app", 15 data: { 16 list: [{ 17 id: 1, 18 name: '张三' 19 }, 20 { 21 id: 2, 22 name: '李四' 23 }, 24 { 25 id: 3, 26 name: '王五' 27 }, 28 { 29 id: 4, 30 name: '赵六' 31 } 32 ] 33 }, 34 methods: { 35 36 } 37 }) 38 </script> 39 </body> 40 </html>
二、遍历对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- 在循环遍历对象时有val(值)，key(键)，还有第三个参数(i):表示其索引位置，可以不写 --> 11 <p v-for="(val,key,i) in user">{{key}}:{{val}}+++当前索引是：{{i}}</p> 12 </div> 13 </body> 14 <script type="text/javascript"> 15 var vm = new Vue({ 16 el: '#app', 17 data: { 18 user: { 19 id: 1, 20 name: '傻娟', 21 gender: '女' 22 } 23 } 24 }) 25 </script> 26 </html>
三、数字迭代
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p v-for="count in 10">这是第{{count}}次循环</p> 11 </div> 12 </body> 13 <script type="text/javascript"> 14 var vm = new Vue({ 15 el:"#app", 16 data:{ 17 18 }, 19 methods:{ 20 21 } 22 }) 23 </script> 24 </html>
