vue（五）基础语法--循环遍历指令

目录

简单数据的处理（常用） 

复杂数据（json数据）

 v-for 与对象

通过key管理状态

Key的来源

这一节类同于vue（四）基础语法--条件渲染-CSDN博客 ，本质都是那些基础语句语法的实现。

简单介绍

我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items形式的特殊语法，

其中 items 是源数据的数组，而 item 是迭代项的别名。

简单数据的处理（常用） 

<template>
    <h1>列表渲染</h1>
    <p v-for="item in names"> {{ item }} </p>  
</template>
<script>
    export default{
        data(){
            return{
                names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统']
            }
        }
    }
</script>  

如下所示： 

复杂数据（json数据）

大多数情况，我们渲染的数据源来源于网络请求，也就是JSON格式

<template>
    <h1>列表渲染</h1>
    <div v-for="item in result">
        <p> {{ item.title }} </p>
        <p> {{ item.url }} </p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                    result:[{
                        id:"1",
                        title:"河北大学成功获批国家社会科学基金重大项目",
                        url:"https://www.hbu.edu.cn/info/1167/20000.htm"
                    },{
                        id:"2",
                        title:"2024年河北省高校图书馆年会在河北大学举办",
                        url:"https://www.hbu.edu.cn/info/1167/20015.htm"
                    },{
                        id:"3",
                        title:"河北大学举办2025年研究生元旦晚会",
                        url:"https://www.hbu.edu.cn/info/1167/20023.htm"
                    }
                ]
            }
        }
    }
</script>

v-for 也支持使用可选的第二个参数表示当前项的位置索引

<template>
    <h1>列表渲染</h1>
    <p v-for="(item,index) in names">{{ index }}-{{ item }} </p>
</template>
<script>
    export default{
        data(){
            return{
                names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统'] 
            }
        }
    }
</script>

上述代码等同于：

<h1>列表渲染</h1>
<p>0-计算机网络</p>
<p>1-计算机组成原理</p>
<p>2-数据结构与算法</p>
<p>3-操作系统</p>

也可以使用 of 作为分隔符来替代 in 这更接近JavaScript的迭代器语法：

 v-for 与对象

也可以使用v-for来遍历一个对象的所有属性

<template>
    <h1>列表渲染</h1>
    <p v-for="(value,key,index) of userInfo">{{ value }} - {{ key }} -{{ index }}</p>
 </template>
<script>
    export default{
        data(){
            return{
                userInfo:{
                    name:"张三",
                    age:20
                }
            }
        }
    }
</script>

等同于：

<h1>列表渲染</h1>
<p>张三 - name - 0</p>
<p>20 - age - 1</p>

通过key管理状态

Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的key：

<template>
    <h1>key属性添加到v-for当中</h1>
    <p v-for="(item,index) in names" :key="index">{{ item }}</p>
 </template>
<script>
    export default{
        data(){
            return{
                names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统'] 
            }
        }
    }
</script>

温馨提示：

key在这里是一个通过v-bind绑定的特殊attribute

推荐在任何可行的时候为 v-for 提供一个key

key绑定的值期望是一个基础类型的值，例如字符串或number类型

Key的来源

请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化

<template>
    <h1>列表渲染</h1>
    <div v-for="(item,index) in result" :key="item.id" >
                    <!-- index表示id，没有可以直接写index，但是比如json返回数据有id的的情况，就要像这里表明 -->
        <p> {{ item.title }} </p>
        <p> {{ item.url }} </p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                    result:[{
                        id:"1",
                        title:"t1",
                        url:"https://www."
                    },{
                        id:"2",
                        title:"t2",
                        url:"https://www."
                    },{
                        id:"3",
                        title:"t3",
                        url:"https://www."
                    }
                ]
            }
        }
    }
</script>