v-for -- 只是循环没那么简单 · Vue&&TypeSprict--基础总结

[TOC] >[success] # v-for -- 循环 ~~~ 1.像标题说的一样只是一个循环没那么简单一样，涉及到数组更新，以及新版本提供的v-bind:key 讲解 ~~~ >[info] ## 语法 ~~~ 1.支持循环数组|对象|数字|字符串，Array | Object | number | string 2.语法上:v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。 3.针对,上述四种的使用例子: <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>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="item,index in items">{{item}}--{{index}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { items:["数", "组", "使", "用"] }, }); </script> </body> </html> ~~~ >[danger] ##### 循环对象 ~~~ 1.循环对象对时候,可以循环出key,value,和脚标 2.但这里不推荐使用对象循环出来的脚标 ~~~ ![](https://box.kancloud.cn/3015795abda49557b653018efa386188_73x99.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="(value,key,index) in items">{{value}}-{{key}}-{{index}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { items:{a:"z", b:"x", c:"v"} }, }); </script> </body> </html> ~~~ >[danger] ##### 循环数字 ~~~ 1.循环数字是从1开始 ~~~ ![](https://box.kancloud.cn/245af303771d914e50fb65be8f865e91_78x138.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="item in 3">{{item}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { }, }); </script> </body> </html> ~~~ >[danger] ##### 你也可以使用 of 来替代 in ~~~ 1.应用官方的话来说 of '它更接近 JavaScript 迭代器的语法' ~~~ ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for='item of message'>{{item}}</p> <p v-for='(item,key) of obj'>{{item}}{{key}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: ['w', 'c'], obj: { 'w': 1, 'c': 2 } }, }) </script> </body> </html> ~~~ >[info] ## 在2.6 更新中 v-for 还支持了可迭代协议定义 [关于可迭代协议MDN讲解](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%8D%8F%E8%AE%AE) [笔记中对协议用法](https://www.kancloud.cn/cyyspring/more/1316856) ~~~ 1.可以理解为 ,包括原生的 'Map' 和 'Set'。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。 ~~~ >[danger] ##### 在2.6 之前循环可迭代协议对象 * 页面效果： ![](https://img.kancloud.cn/e8/9d/e89d8171e9248d6f2ed41b0ce5ee4820_182x103.png) ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for='item of 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> </body> </html> ~~~ >[danger] ##### 2.6 之后的版本 * 页面打印结果 ![](https://img.kancloud.cn/67/a7/67a71dc149a7658b81f4c34d514826e2_101x138.png) ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> </head> <body> <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> </body> </html> ~~~