Vue循环渲染（v-for）
Posted antao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue循环渲染（v-for）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!--v-for循环普通数组--> <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p> <br /> <!--v-for循环对象数组--> <p v-for="(item,i) in listObj">--索引值--{{i}}--id--{{item.id}} --姓名--{{item.name}}</p> <br /> <!--v-for迭代对象；注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引--> <p v-for="(val,key,i) in user">--索引值--{{i}}--键是--{{key}} --值是--{{val}}</p> <br /> <!--v-for迭代数字； in 后面我们放过数组、对象数组、对象，还可以放数字--> <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始--> <p v-for="count in 10">这是第{{count}}次循环</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { list: [1, 2, 3, 4, 5], listObj: [{ id: 1, name: ‘zs1‘ }, { id: 2, name: ‘zs2‘ }, { id: 3, name: ‘zs3‘ }, { id: 4, name: ‘zs4‘ }, { id: 5, name: ‘zs5‘ }, ], user: { id: 1, name: ‘小明‘, gender: ‘男‘, age: ‘18‘, classname: ‘A1631‘ } } }) </script>
以上是关于Vue循环渲染（v-for）的主要内容，如果未能解决你的问题，请参考以下文章