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) [筆記中對協議用法](http://www.hmoore.net/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> ~~~