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

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

<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>

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