列表循環渲染 · vue筆記

[TOC] >[success] # 列表循環渲染接下來介紹如何使用 **v-for循環** **數組** 或 **對象** 。 >[success] ## 循環數組循環數組用有 **2 個參數** 參數1：**item** 每一項的值參數2：**index索引** ，**index可選** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表循環渲染</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ list: ['dell', 'lee', 'teacher'] } }, template: ` <div> <div v-for="(item, index) in list" :key="item"> {{ item }} -- {{ index }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 循環對象循環對象用有**3 個參數** 參數1：**value**每一項 **鍵值對** 的值參數2：**key** 對象的 **key** 參數3：**index** 索引值 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表循環渲染</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ listObject: { name: 'dell', lastName: 'lee', job: 'teacher' } } }, template: ` <div v-for="(value, key, index) in listObject" :key="value"> {{value}} -- {{key}} -- {{index}} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 循環數字也可以 **循環數字** ，如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表循環渲染</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ template: ` <div v-for="item in 10" :key="item"> {{ item }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-fo 與 v-if 同時使用 **需求** ： **循環數組** 或 **對象** 時，如果某一項不想展示，你可能會想 **v-for** 與 **v-if** 同時使用，這種做法是錯誤的， **v-for** 與 **v-if** 同時使用時，**v-for** 的權重要比 **v-if** 高，所以 **v-if** 不生效 **解決** ： 1. 方案一：在內部添加一個 **template標簽（該標簽渲染時不會占位）**，在 **div** 元素上使用 **v-if** 做 **判斷處理** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表循環渲染</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ listObject: { name: 'dell', lastName: 'lee', job: 'teacher' } } }, template: ` <template v-for="(value, key, index) in listObject" :key="value"> <div v-if="value !== 'dell'"> {{value}} -- {{key}} -- {{index}} </div> </template> ` }) const vm = app.mount('#root') </script> </html> ~~~ 1. 方案二：用 **計算屬性過濾掉隱藏項** ，只返回 **顯示項** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表循環渲染</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ listObject: { name: 'dell', lastName: 'lee', job: 'teacher' } } }, computed: { // 把展示項過濾出來 filterLsit(){ let result = {} for(const [key,value] of Object.entries(this.listObject)){ if(value !== 'dell'){ result[key] = value } } return result } }, template: ` <div v-for="(value, key, index) in filterLsit" :key="value"> {{value}} -- {{key}} -- {{index}} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[warning] ## 注意使用 **v-for循環** 時，要添加 **key屬性** ，因為，向 **循環的列表添加了一項數據，vue不會重新渲染整個列表，只會渲染最新添加的那項** ，為了做區分所以 **加key屬性做數據的區分** ，**建議使用 item 或者一些唯一的值來做key** ，不推薦使用 **index** ，因為 **index** 做 **key** 渲染列表時，如果有恰巧有 **刪除功能**，刪除了一項 **item**， **刪除項** 后的兄弟級會 **自動頂到前面補位** ，就會 **導致程序出現bug** 。