要做出一个简单的购物车界面。首先，有一个复选框，可以选择商品，后面紧跟的是商品名称，然后，是删除按钮，根据这个需求，先写出一个简单的界面，代码如下：
<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>
现在，页面错误的情况解决了：
