前言
在前面的章节中，我们已经了解了关于 Vue 的条件渲染，今天我们就一起来看看 Vue 的列表渲染，即 For 循环。
例子
v-for
和 Python 中的 for 循环一样，Vue 的列表渲染也遵循 item in items 的规范。item 为 items 中的元素别名。
代码
<!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"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Vfor</title> </head> <body> <ol id="app"> <li v-for="item in items" :key="item.title"> {{ item.title }} </li> </ol> <script> app = new Vue({ el: '#app', data:{ "items":[ {title: 'phyger'}, {title: 'fly'} ] } }) </script> </body> </html> 复制代码
效果
网络异常，图片无法展示
|
v-for 中使用对象
<!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"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Vfor</title> </head> <body> <div id="app"> <ol> <li v-for="item in items" :key="item.title"> {{ item.title }} </li> </ol> <h1>Authors Info</h1> <ul> <li v-for="value,key,index in objs"> {{ index }} : {{ key }} : {{ value }} </li> </ul> </div> <script> app = new Vue({ el: '#app', data:{ "items":[ {title: 'phyger'}, {title: 'fly'} ], "objs": { name: "phyger", home: "xian", age: 18 } } }) </script> </body> </html> 复制代码
在对对象进行循环遍历的时候，
value，key，indx的顺序是固定的，即第一个参数获对象的值，最后一个参数获取索引。
效果
网络异常，图片无法展示
|
v-for 中使用 v-if
假如我们要遍历一个任务列表，但是只显示已完成的任务，此时我们就可以使用 v-for+v-if 实现。
<!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"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Vfor</title> </head> <body> <div id="app"> <ol> <li v-for="item in items" :key="item.title"> {{ item.title }} </li> </ol> <h1>Authors Info</h1> <ul> <li v-for="value,key,index in objs"> {{ index }} : {{ key }} : {{ value }} </li> </ul> <h1>v-if in v-for</h1> <ol> <li v-for="todo in todos" v-if="todo.status==1"> {{ todo.name }} </li> </ol> </div> <script> app = new Vue({ el: '#app', data:{ "items":[ {title: 'phyger'}, {title: 'fly'} ], "objs": { age: 18, name: "phyger", home: "xian" }, todos: [ {name: 'eat',status: 1}, {name: 'work',status: 1}, {name: 'sleep',status: 0} ] } }) </script> </body> </html> 复制代码
v-if in v-for场景中，v-for的优先级要高于v-if，所以v-if会分别在每个for循环中重复运行。
效果
只显示 status=1 的任务。
网络异常，图片无法展示
|
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
