🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便！ 广告
>[success] # v-for 循环 1. 语法上`v-for` 指令需要使用` item in items` 形式的特殊语法，`items `是源数据数组并且 `item `是数组元素迭代的别名 2. 支持循环**数组|对象|数字|字符串**，`Array | Object | number | string`（也可以遍历其他 **可迭代对象** (`Iterable`)） ~~~ html <div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div> <div v-for="item in 10"></div> <!--注意循环数字是从1开始-> ~~~ * **可迭代对象** ~~~ <div id="app"> <p v-for='item in createIterator'>{{item}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { // 生成器 createIterator: { items: [1, 2, 3], *[Symbol.iterator]() { for (let item of this.items) { yield item } } } }, methods: { }, }) </script> ~~~ 3. 也可以使用 `of` 来 替代 `in` ，用官方的话来说 of '它更接近 `JavaScript `**迭代器的语法** 4. 也可以量别名时使用**解构**，和**解构函数参数类似** 5. ` <template>` 标签上使用 v-for 来渲染一个包含多个元素的块 ~~~ <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> ~~~ >[info] ## 综合案例 ![](https://img.kancloud.cn/94/b4/94b4013288b292083e026c014049226b_592x715.png) ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <p>数组-----------------------------</p> <div v-for="(item,index) in array">{{index}}-{{item}}</div> <p>数组对象解构-----------------------------</p> <div v-for="({name},index) in arrayObj">{{index}}-{{name}}</div> <p>对象----------------------------</p> <div v-for="(value,key,index) in object"> {{index}}-{{key}}-{{value}} </div> <p>map ----------------------------</p> <div v-for="(item,index) in map">{{index}}-{{item}}</div> <p>map 解构----------------------------</p> <div v-for="([key,value],index) in map"> {{index}}-{{key}}-{{value}} </div> <p>字符串 ----------------------------</p> <div v-for="(item,index) in str">{{index}}-{{item}}</div> <p>set ----------------------------</p> <div v-for="(item,index) in set">{{index}}-{{item}}</div> </div> <!-- 通过cdn 引入 --> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ // data: option api data() { return { arrayObj: [{ name: 'w' }], array: ['足球', '篮球', '乒乓'], object: { name: 'w', age: 15, }, str: '我爱中国', map: new Map([ ['name', 'w'], ['age', 15], ]), set: new Set(['足球', '篮球', '乒乓']), } }, }) app.mount('#app') </script> </body> </html> ~~~