v-for的作用:
当我们需要对一组数据进行渲染时,我们就可以使用v-for来完成
v-for常见四种使用方法分别是:
1.使用v-for循环一个简单的数组
2.使用v-for循环一个复杂的数组
3.使用v-for循环对象
4.v-for循环一个迭代的数字
<div id="app">
<!--v-for循环一个简单的数组-->
<!--格式说明:index为可选参数,当不需要获取每一项的索引值时,可以省略index-->
<p v-for="item in list">{{item}}</p>
<P v-for="(item ,i) in list">索引值:{{i}}---每一项:{{item}}</P>
<!--v-for循环一个复杂的数组-->
<p v-for="(item,i) in list1">索引值:{{i}}--id:{{item.userid}}---姓名:{{item.username}}</p>
<!--v-for循环一个对象-->
<!--参数说明:key和index为可选参数-->
<p v-for="(val,key,i) in list2">id:{{val}},name:{{key}},index:{{i}}</p>
<!--v-for 循环一个迭代数字-->
<p v-for="count in 10">这是第{{count}}次循环</p>
v-for遍历数组
格式:v-for="(item, index) in items"
格式说明:index为可选参数,当不需要获取每一项的索引值时,可以省略index
<ul>
<li v-for="(item,index) in anime">{{index+1}}-{{item}}</li>
</ul>
data: {
anime: ['三体', '狐妖小红娘', '天宝伏妖录'],
v-for遍历对象
格式:v-for="(value, key, index) in info"。(参数按照重要程度排序)
参数说明:key和index为可选参数
<ul>
<li v-for="(value,key) in info">{{key}}:{{value}}</li>
</ul>
data: {
info: {
name: "super咖啡",
age: 21,
height: 1.68
}
v-for遍历数字
格式:v-for="count in counts"
注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始
<p v-for="count in 10">这是第{{count}}次循环</p>
v-for的key属性
在我们使用v-for时,建议给对应的元素或组件添加一个key属性
为何要添加一个key属性?主要目的就是为了高效的更新虚拟DOM
假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前,diff算法默认是将c更新成f,d更新成c,e更新成d,最后再插入e
而在添加key属性后,key为每一个节点做了一个标识,diff算法可以准确高效的在要求的位置插入新节点
为key赋的值必须要与元素具有一一对应的关系
<li v-for="(item,index) in anime" :key="item">{{index+1}}-{{item}}</li>
当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的 key 属性:
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性(即:key 的值不能重复)
③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
④ 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
⑤ 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)
v-for中key的使用注意项:
v-for在循环时,key属性只能使用number获取string
key在使用时只能使用v-bind的属性绑定的形式,指定key的值
在组件中使用v-for的时候,或者在一些特殊的时候v-for使用有问题的时候,必须在使用v-for的同时指定唯一的字符或者number类型:key值