©2020-2024 ioDraw All rights reserved,
Privacy Policy
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值