列表循环渲染 · 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** 。