前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. 列表渲染
1.1 v-for
vue 提供了 v-for 指令，用来辅助开发者基于数组、对象、字符串（用的很少）、指定次数（用的很少）等来循环渲染相似的 UI 结构。 v-for 指令需要使用item in items 或 item of items 的特殊语法，其中：
- items 是待循环的数据
- item 是当前的循环项
1.2 v-for 中的索引
v-for 指令除了可以获取当前正在循环的项，还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items 或 (item, index) of items。
v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如
(username, idx) in userlist。
2. 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"> <title>Document</title> </head> <body> <div id="root"> <ul> <li v-for="(person, index) in persons"> [{{index}}] 姓名：{{person.name}} -- 年龄：{{person.age}} </li> </ul> <ul> <li v-for="(person, index) of persons"> [{{index}}] 姓名：{{person.name}} -- 年龄：{{person.age}} </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { persons: [ {id: 101, name: 'ZS', age: 18}, {id: 102, name: 'LS', age: 19}, {id: 103, name: 'WW', age: 20} ] } }) </script> </html>
3. v-for 遍历对象
使用 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"> <title>Document</title> </head> <body> <div id="root"> <ul> <li v-for="(value, key, index) in zs"> {{index}} {{key}} : {{value}} </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { persons: [ {id: 101, name: 'ZS', age: 18}, {id: 102, name: 'LS', age: 19}, {id: 103, name: 'WW', age: 20} ], zs: {id: 101, name: 'ZS', age: 18} } }) </script> </html>
4. v-for 遍历字符串
使用 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"> <title>Document</title> </head> <body> <div id="root"> <ul> <li v-for="(char, index) in my_str"> {{index}} -- {{char}} </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { persons: [ {id: 101, name: 'ZS', age: 18}, {id: 102, name: 'LS', age: 19}, {id: 103, name: 'WW', age: 20} ], zs: {id: 101, name: 'ZS', age: 18}, my_str: 'abcdefg' } }) </script> </html>
5. v-for 遍历指定次数
使用 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"> <title>Document</title> </head> <body> <div id="root"> <ul> <li v-for="(number, index) in 3"> {{index}} -- {{number}} </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { persons: [ {id: 101, name: 'ZS', age: 18}, {id: 102, name: 'LS', age: 19}, {id: 103, name: 'WW', age: 20} ], zs: {id: 101, name: 'ZS', age: 18}, my_str: 'abcdefg' } }) </script> </html>
6. key的作用与原理
6.1 key
key 在 v-for 循环渲染中，可以为每个循环渲染出来的元素节点添加一个唯一的身份标识。
在使用 v-for 循环渲染时，最好写上 key
6.2 key错误演示
6.2.1 index作为key
<!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"> <title>Document</title> </head> <body> <div id="root"> <button @click="addPerson">添加</button> <ul> <li v-for="(person, index) in persons" :key="index"> {{index}}: {{person.name}} -- {{person.age}} <input type="text"> </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { persons: [ {id: 101, name: 'ZS', age: 18}, {id: 102, name: 'LS', age: 19}, {id: 103, name: 'WW', age: 20} ] }, methods: { addPerson() { // 在数组的开头添加一人 this.persons.unshift({id: 104, name: 'TOM', age: 21}) } }, }) </script> </html>
通过观察上面的代码和运行结果，发现新的人员信息和新的输入框在添加到页面后出现了显示位置不匹配的问题。
6.2.2 不写key
<!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"> <title>Document</title> </head> <body> <div id="root"> <button @click="addPerson">添加</button> <ul> <li v-for="(person, index) in persons"> {{index}}: {{person.name}} -- {{person.age}} <input type="text"> </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { persons: [ {id: 101, name: 'ZS', age: 18}, {id: 102, name: 'LS', age: 19}, {id: 103, name: 'WW', age: 20} ] }, methods: { addPerson() { this.persons.unshift({id: 104, name: 'TOM', age: 21}) } }, }) </script> </html>
通过观察，发现新的人员信息和新的输入框在添加到页面后依旧出现了显示位置不匹配的问题。
6.2.3 出现错误的解释
使用 v-for 进行循环渲染时，不写 key 时，vue 为自动为DOM元素设置一个 key ，key 的值为 index。即不写 key 与使用 index 作为 key 一样。
