1.迭代普通数组 在data中定义普通数组 data:{ list:[1,2,3,4,5,6] } 在html中使用 v-for 指令渲染 <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p> 2.迭代对象数组 在data中定义对象数组 data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ] } 在html中使用 v-for 指令渲染 <p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p> 3.迭代对象 在data中定义对象 data:{ user:{ id:1, name:'托尼.贾', gender:'男' } } 在html中使用 v-for 指令渲染 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p> 4.迭代数字 <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始--> <p v-for="count in 10">这是第{{count}}次循环</p> 完整代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <!--v-for循环普通数组--> <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p> <br/> <!--v-for循环对象数组--> <p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p> <br/> <!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引--> <p v-for="(val,key) in user">--键是--{{key}} --值是--{{val}}</p> <br/> <!-- in 后面我们放过数组、对象数组、对象，还可以放数字--> <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始--> <p v-for="count in 10">这是第{{count}}次循环</p> </div> </body> <script src="vue.min.js"></script> <script> var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ], user:{ id:1, name:'托尼.贾', gender:'男' } } }); </script> </html> --------------------- 版权声明：本文为CSDN博主「北海之灵」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/xukongjing1/article/details/81584890