1.v-for基本用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!--v-for循环普通数组--> <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p> <br /> <!--v-for循环对象数组--> <p v-for="(item,i) in listObj">--索引值--{{i}}--id--{{item.id}} --姓名--{{item.name}}</p> <br /> <!--v-for迭代对象；注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引--> <p v-for="(val,key,i) in user">--索引值--{{i}}--键是--{{key}} --值是--{{val}}</p> <br /> <!--v-for迭代数字； in 后面我们放过数组、对象数组、对象，还可以放数字--> <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始--> <p v-for="count in 10">这是第{{count}}次循环</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { list: [1, 2, 3, 4, 5], listObj: [{ id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' }, { id: 5, name: 'zs5' }, ], user: { id: 1, name: '小明', gender: '男', age: '18', classname: 'A1631' } } }) </script>
2.v-for为什么要加key
先看示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item,i) in list"> <input type="checkbox"> {{item.name}} </li> </ul> <br /> <ul> <li v-for="(item, i) in list" v-bind:key="item.id"> <input type="checkbox"> {{item.name}} </li> </ul> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { name: '', newId: 3, list: [{ id: 1, name: 'xt1' }, { id: 2, name: 'xt2' }, { id: 3, name: 'xt3' }, ], }, methods: { add() { //注意这里是unshift this.list.unshift({ id: ++this.newId, name: this.name }) this.name = '' } }, }); </script>
没有key时，当选中xt2时，添加xt后选中的却是xt1，并不是我们想要的结果；有key时，当选中xt2时，添加xt后依旧选中的是xt2，是我们想要的结果。
vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用，增加Key可以标识组件的唯一性。
3.v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。
有数据时显示循环列表，没有数据时显示暂无数据。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul v-if="todos.length>0"> <li v-for="todo in todos" v-bind:key="todo.id"> {{ todo.name }} </li> </ul> <p v-else>暂时没有数据</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { todos: [{ id: 1, name: '列表1' }, { id: 2, name: '列表2' }, { id: 3, name: '列表3' }, ], }, }); </script>