【购物车案例】for循环为什么使用key

news2024/11/16 6:32:50

要做出一个简单的购物车界面。首先，有一个复选框，可以选择商品，后面紧跟的是商品名称，然后，是删除按钮，根据这个需求，先写出一个简单的界面，代码如下：

<template>
	<view class="out">
		<view class="item" >
			<checkbox></checkbox>
			<text class="title" >索尼</text>
			<text class="del" >删除</text>
		</view>
	</view>
</template>

<script setup>


</script>

<style lang="scss" scoped>
	     .out{
			 padding: 10px;
		 }  
		 .item{
			 padding: 10px 0;
			  .del{
				  color: #c00;
				  margin-left: 30px;
			  }
		 }
</style>

实际效果：
在这里插入图片描述
现在，定义一个商品循环体，对item进行循环，完成整个界面的制作，代码如下：

<template>
	<view class="out">
		<view class="item" v-for="item in goods">
			<checkbox></checkbox>
			<text class="title" >{{item.name}}</text>
			<text class="del" >删除</text>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const goods = ref([
	{id:1,name:"索尼"},
	{id:2,name:"摩托罗拉"},
	{id:3,name:"诺基亚"},
	{id:4,name:"LG"},
])

</script>

<style lang="scss" scoped>
	     .out{
			 padding: 10px;
		 }  
		 .item{
			 padding: 10px 0;
			  .del{
				  color: #c00;
				  margin-left: 30px;
			  }
		 }
</style>

实际效果：
在这里插入图片描述
页面部分制作完毕，接下来开始逻辑部分，让删除键起作用，先给删除加上click事件，后在script中写入方法，删除的时候我们得知道删除的是哪一项，这里我们用索引值作为标识，代码如下：

<template>
	<view class="out">
		<view class="item" v-for="(item,index) in goods">
			<checkbox></checkbox>
			<text class="title" >{{item.name}}</text>
			<text class="del" @click="remove(index)">删除</text>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const goods = ref([
	{id:1,name:"索尼"},
	{id:2,name:"摩托罗拉"},
	{id:3,name:"诺基亚"},
	{id:4,name:"LG"},
])
function remove(index){
	goods.value.splice(index,1)
}
</script>

<style lang="scss" scoped>
	     .out{
			 padding: 10px;
		 }  
		 .item{
			 padding: 10px 0;
			  .del{
				  color: #c00;
				  margin-left: 30px;
			  }
		 }
</style>

实际效果：
在这里插入图片描述
成功实现删除，但注意看，在动画中，选中“摩托罗拉”，并将其删除后，“诺基亚”被选中了，这是因为没有key的情况下，Vue在数据项顺序改变时会复用错误的DOM元素，导致页面显示错误。我们给它加上key，key需要具有唯一性，这里给key设置为item.id，代码如下：

<template>
	<view class="out">
		<view class="item" v-for="(item,index) in goods":key = "item.id">
			<checkbox></checkbox>
			<text class="title" >{{item.name}}</text>
			<text class="del" @click="remove(index)">删除</text>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const goods = ref([
	{id:1,name:"索尼"},
	{id:2,name:"摩托罗拉"},
	{id:3,name:"诺基亚"},
	{id:4,name:"LG"},
])
function remove(index){
	goods.value.splice(index,1)
}
</script>

<style lang="scss" scoped>
	     .out{
			 padding: 10px;
		 }  
		 .item{
			 padding: 10px 0;
			  .del{
				  color: #c00;
				  margin-left: 30px;
			  }
		 }
</style>

现在，页面错误的情况解决了：
在这里插入图片描述