这是一个按着千锋kerwin老师的视频写的简易购物车，用vue3写的，软件用vscode，详细视频资源见链接
引入vue3的地址
<script type="text/javascript" src="https://unpkg.com/vue@next"> </script>调整整体页面格式
<style>
/* 使得能够排在一行上 */
li {
display:flex;
justify-content:space-around;
padding:10px;
}
li img{
width:100px;
}
</style>该图片来自于百度
pic:"https://ts1.cn.mm.bing.net/th/id/R-C.0c8bf36e099654aadaf5f127ef1a3f1b?rik=uHrB%2blGez03%2fAA&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f10%2f24%2f289_102445_a1cff.jpg&ehk=EeF%2fioqRM6NfQqkCgXw%2bwLvO1%2fxZgeZ2pof7ALNLGsg%3d&risl=&pid=ImgRaw&r=0"用sum（）方法计算总金额
sum(){
var total = 0
// 累加计算checkList数组的每一项的 价格*数量
this.checkList.forEach(item=>{
total+=item.price*item.number
})
return total
},控制删除
handleDeleteClick(index,id){
// console.log(index)
//删除的是datalist功能 靠index
this.datalist.splice(index,1)
//删除checklist 靠id
// console.log(id)
this.checkList = this.checkList.filter(item=>item.id!==id)
//为删除同步一下状态
this.handleItemChecked()
},写全选方法
handleAllCheck(){
// console.log(this.isAll)
if(this.isAll){
this.checkList = this.datalist
}else{
this.checkList=[]
}
},最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
/* 使得能够排在一行上 */
li {
display:flex;
justify-content:space-around;
padding:10px;
}
li img{
width:100px;
}
</style>
<script type="text/javascript" src="https://unpkg.com/vue@next"> </script>
</head>
<body>
<div id="box">
<input type = "checkbox" v-model="isAll" @change="handleAllCheck">全选/全不选
<ul>
<li v-for="(item,index) in datalist" :key="item.id">
<input type="checkbox" v-model="checkList" :value="item" @change="handleItemChecked">
<img :src="item.pic">
<div>
<div>{
{item.name}}</div>
<div style="color:red;">${
{item.price}}</div>
</div>
<div>
<button @click="item.number--" :disabled="item.number===1">-</button>
<span>{
{item.number}}</span>
<button @click="item.number++" :disabled="item.number===item.limit">+</button>
</div>
<div>
<button @click="handleDeleteClick(index,item.id)">删除</button>
</div>
</li>
</ul>
<div>总金额：{
{sum()}}</div>
{
{checkList}}
</div>
<script type="text/javascript">
var obj={
data(){
return {
isAll:false,
checkList:[], //勾选的购车的数据
datalist: [{
name: "商品1",
price:10,
number:1,
id:1,
limit:5,
pic:"https://ts1.cn.mm.bing.net/th/id/R-C.0c8bf36e099654aadaf5f127ef1a3f1b?rik=uHrB%2blGez03%2fAA&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f10%2f24%2f289_102445_a1cff.jpg&ehk=EeF%2fioqRM6NfQqkCgXw%2bwLvO1%2fxZgeZ2pof7ALNLGsg%3d&risl=&pid=ImgRaw&r=0"
},
{
name: "商品2",
price:20,
number:2,
id:2,
limit:15,
pic:"https://ts1.cn.mm.bing.net/th/id/R-C.0c8bf36e099654aadaf5f127ef1a3f1b?rik=uHrB%2blGez03%2fAA&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f10%2f24%2f289_102445_a1cff.jpg&ehk=EeF%2fioqRM6NfQqkCgXw%2bwLvO1%2fxZgeZ2pof7ALNLGsg%3d&risl=&pid=ImgRaw&r=0"
},
{
name: "商品3",
price:30,
number:3,
id:3,
limit:15,
pic:"https://ts1.cn.mm.bing.net/th/id/R-C.0c8bf36e099654aadaf5f127ef1a3f1b?rik=uHrB%2blGez03%2fAA&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f10%2f24%2f289_102445_a1cff.jpg&ehk=EeF%2fioqRM6NfQqkCgXw%2bwLvO1%2fxZgeZ2pof7ALNLGsg%3d&risl=&pid=ImgRaw&r=0"
},
]
}
},
methods:{
sum(){
var total = 0
// 累加计算checkList数组的每一项的 价格*数量
this.checkList.forEach(item=>{
total+=item.price*item.number
})
return total
},
handleDeleteClick(index,id){
// console.log(index)
//删除的是datalist功能 靠index
this.datalist.splice(index,1)
//删除checklist 靠id
// console.log(id)
this.checkList = this.checkList.filter(item=>item.id!==id)
//为删除同步一下状态
this.handleItemChecked()
},
//全选方法
handleAllCheck(){
// console.log(this.isAll)
if(this.isAll){
this.checkList = this.datalist
}else{
this.checkList=[]
}
},
//每项选择
handleItemChecked(){
if(this.checkList.length===this.datalist.length){
// console.log("全选")
this.isAll = true;
}
else{
// console.log("未全选")
this.isAll = false;
}
}
}
}
var vm = Vue.createApp(obj).mount("#box")
</script>
</body>
</html>此为学习模仿代码，参照千锋kerwin老师视频所写，链接为： 【千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到精通（资料含前端学习路线图）-哔哩哔哩】 https://b23.tv/dJqyfv1