vue v-for详解

v-for用于数据渲染,支持遍历数组、复杂数组、对象和数字。循环时可以使用(index,item)语法获取索引和值。对于对象遍历,可以获取(val,key,index)。key属性用于高效更新虚拟DOM,确保元素唯一性,尤其在列表数据变动时。建议始终为v-for指定key值。
摘要由CSDN通过智能技术生成

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值

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值