v-for列表渲染用法-for循环为什么用key

一,v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表,v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

代码示例：

<script setup> 
import { ref } from 'vue';
//定义一个数组，存些基本信息
const num=ref([
	{id:1,name:"张三",age:18},
	{id:2,name:"李四",age:19},
	{id:3,name:"王五",age:18},
	{id:4,name:"嘿嘿",age:18}
])
</script>

<template>
     <view v-for="item in num">
			id:{{item.id}}
			名称：{{item.name}}
			年龄：{{item.age}}
     </view>
</template>

然后我们就可以在页面上看到用for循环出的基本信息

在 v-for 块中可以完整地访问父作用域内的属性和变量，v-for 也支持使用可选的第二个参数表示当前项的位置索引 

代码示例：

<template>
    <view v-for="(item,index) in num">
		id:{{item.id}}
		名称：{{item.name}}
		年龄：{{item.age}}
		索引值：{{index}}
	</view>
</template>

 

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

<view v-for="item of items"></view>

注意

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显

二，通过 key 管理状态

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

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况

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

代码示例:

<template>
   <!-- <view class="box">
        <view v-for="(item,index) in num">
			id:{{item.id}}
			名称：{{item.name}}
			年龄：{{item.age}}
			索引值：{{index}}
		</view>
    </view> -->
	 <view class="box1" v-for="(item,index) in num" :key="item.id">
		<checkbox></checkbox>
		<text>{{item.name}}&nbsp;&nbsp;&nbsp;</text>
		<text @click="del(index)">删除</text><!-- 删除的点击事件,传进了下标 -->
	</view>
</template>
 
<script setup> 
import { ref } from 'vue';
//定义一个数组，存些基本信息
const num=ref([
	{id:1,name:"张三",age:18},
	{id:2,name:"李四",age:19},
	{id:3,name:"王五",age:18},
	{id:4,name:"嘿嘿",age:18}
])

function del(e){
	num.value.splice(e,1)//按下标删除
}
</script>

<style lang="scss" scoped>

</style>