Vue 基本列表 v-for 详细讲解 以及key 的原理
【摘要】 vue基本列表 （v-for）v-for 指令：1.用于展示列表数据2.语法：v-for=’(item,index) in/of xxx’ :key=‘yyy’3.可遍历：数组，对象，字符串，指定次数数组，对象，字符串，指定次数 的遍历具体如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
vue基本列表 （v-for）
v-for 指令：
1.用于展示列表数据
2.语法：v-for=’(item,index) in/of xxx’ :key=‘yyy’
3.可遍历：数组，对象，字符串，指定次数
数组，对象，字符串，指定次数 的遍历具体如下代码
<!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>基本列表</title>
<script src="../Vue.js/vue.js"></script>
</head>
<body>
<div id="root">
<ol>
<h2>测试遍历数组</h2>
<!-- 遍历数组 -->
<li v-for='(p,index) in person' :key="index.id">
<!-- 插值语法获取p内容 -->
{{p.name}}--{{p.age}}--{{p.id}}-{{index}}
</li>
<br/>
<h2>测试遍历对象</h2>
<!-- 遍历对象 -->
<li v-for='(value,key) of car' :key="key.id">
{{key}}--{{value}}
</li>
<br/>
<!-- 遍历字符串 -->
<h2>测试遍历字符串</h2>
<li v-for='(char,k) of str' :key='index'>
{{k}}--{{char}}
</li>
<!-- 测试遍历指定次数 -->
<h2>遍历指定次数</h2>
<li v-for='(number,index) of 4' :key='index'>
{{index}}--{{number}}
</li>
</ol>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
person:[
{id:'001',name:'张三',age:'20'},
{id:'002',name:'张四',age:'22'},
{id:'003',name:'张五',age:'23'},
],
car:{
name:'迈凯伦',
price:"200w",
color:'yellow'
},
str:'unique'
}
})
</script>
</body>
</html>
一. 遍历数组
<li v-for='(p,index) in person' :key="index.id">
<!-- 插值语法获取p内容 -->
{{p.name}}--{{p.age}}--{{p.id}}-{{index}}
</li>
1.动态绑定 :key=“p.id” 让每一个p都有唯一的标识 （在后面我们详细讲解key 的原理）
2.(p,index) 第一个代表遍历的内容，第二个代表索引
二. 遍历对象
<li v-for='(value,key) of car' :key="key.id">
{{key}}--{{value}}
</li>
- (value,key) 第一个代表值，第二个代表键（key)
三.遍历字符串
<li v-for='(char,k) of str' :key='index'>
{{k}}--{{char}}
</li>
- k代表索引，value代表遍历值
四.遍历指定次数
<li v-for='(number,index) of 4' :key='index'>
{{index}}--{{number}}
</li>
1.遍历指定次数，此处即遍历从0-4
2.number为遍历的数，index为遍历值的索引
五.key的原理
1.虚拟DOM中的作用：
key是虚拟的对象标识，当数据发生变时，Vue会根据【新数据】生成【新的虚拟DOM】，
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key
1.若虚拟DOM中内容没变，直接使用之前的真实DOM
2.若虚拟DOM中内容改变了，则生成新的虚拟DOM，随后替换页面中的真DOM
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到新的页面中
3.用index作为key可能引发的问题：
1.若对数据进行：逆序添加，逆序删除等破坏顺序操作
会产生没有必要的真实DON更新==> 页面不会有影响但是效率低
2.如果结构中包含输入类的DOM：
会产生错误DOM更新 ==> 页面更新出现问题
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）