【vue3入门】-【7】列表渲染

列表渲染

• v-for列表渲染

可以使用一个v-for指令基于一个数组来渲染一个列表，v-for指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名，item是可以改名的，和{{ }}内的名称保持一致就行，结合div或其他标签使用，可以获取列表内的多个属性值

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

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

<template>
    <h3>列表渲染</h3>
    <p v-for="(name,index) in names">{{ name }}-{{ index }}</p> <!--列表中单个属性， 并且可以获取当前值的下标-->
    <div v-for="res in result"> <!--列表中多个属性-->
        <p :id="res.id">{{ res.title }}</p>
        <img :src="res.image">
    </div>
</template>

<script>
export default {
    data() {
        return {
            names: ["测试1", "测试2", "测试3"],
            result: [
                {
                    "id":123123,
                    "title": "第一個ID",
                    "image": "C:\Users\Administrator\Desktop\头像.jpg",
                },
                {
                    "id":123,
                    "title": "第二個ID",
                    "image": "C:\Users\Administrator\Desktop\头像.jpg",
                },
            ]
        }
    }
}
</script>

• v-for与对象

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

<template>
    <h3>列表渲染</h3>
    <div>
        <p v-for="(value, key, index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
        <p v-for="value of userInfo">{{ value }}</p>
        <!--value：对象值，key：对象key，index：对象下标，单独使用时返回的是value-->
    </div>

</template>

<script>
export default {
    data() {
        return {
           userInfo:{
                name:"iwen",
                age:20,
                sex:"男"
            }
        }
    }
}
</script>

• 通过key管理状态

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

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

<template>
    <h3>key属性添加到v-for中</h3>
    <p v-for="(value,index) of names" :key="index">{{ value }}</p>
</template>
<script>
export default{
    data(){
        return{
            names:["测试2","测试1","测试3"]
        }
    }
}
</script>

温馨提醒：

key在这里是通过v-bind绑定的特殊Attribute

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

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

• key的来源

请不要使用index来作为key使用，我们要确保每一条数据的唯一索引不会发生变化，因此一般使用接口返回的数据库id。

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9