一、遍历数组类型
1、v-for指令用于展示列表数据
2、语法:v-for=‘’(item,index)in xxx ‘’ :key=‘yyy’
3.可遍历:数组 、对象、 字符串(用的少)、指定次数(用的很少)
1.想生成多个谁,就在谁的身上加上v-for
p是在写li标签的时候用的一个形参
<div id="root">
<li v-for="p in persons">姓名-年龄</li>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
persons: [
{ id: '01', name: '张三', age: 18 },
{ id: '01', name: '张三', age: 18 },
{ id: '01', name: '张三', age: 18 }
]
}
})
</script>
2 内容变成p.name p.age
p的这个形参可以直接在li标签体里面用
<div id="root">
<li v-for="p in persons">
{{p.name}}-{{p.age}}
</li>
</div>
3.key(粗略)
这里的key是指让每一个li都有了一个唯一的标识,只要用到遍历这种方式去生成多个同样结构的数据,必须给每一个结构打个标识
<div id="root">
<li v-for="p in persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
</div>
把一个形参换成两个
p是遍历的每一项,index索引值
<div id="root">
<li v-for="(p,index) in persons" >
{{p.name}}--{{p.age}}
</li>
</div>
二、遍历对象类型
这里的a是value b是key
<li v-for="(a,b) in car">
{{a}}--{{b}}
</li>
new Vue({
el: '#root',
data: {
car:{
name:'奥迪',
price:'70w',
color:'黑色'
}
}
})
三、遍历字符串
<li v-for="(char,index) in str" :key="'index">
{{char}}--{{index}}
</li>
new Vue({
el: '#root',
data: {
str:'hello',
}
})
四、遍历指定次数
<li v-for="(number,index) in 5" :key="index">
{{number}}--{{index}}
</li>
五、key的原理
(1)虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
(2)对比规则:
1.旧虚拟DOM中找到了与新虚拟DOM相同的key: ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM! ②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
2.旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到到页面。
(3)用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM: 会产生错误DOM更新 ==> 界面有问题。
(4)开发中选择key?:**
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。