This is a simple shopping cart written according to the video of Mr. Qianfeng Kerwin. It is written in vue3 and the software uses vscode. For detailed video resources, see the link
Introduce the address of vue3
<script type="text/javascript" src="https://unpkg.com/vue@next"> </script>Adjust the overall page format
<style>
/* 使得能够排在一行上 */
li {
display:flex;
justify-content:space-around;
padding:10px;
}
li img{
width:100px;
}
</style>The picture comes from Baidu
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"Calculate the total amount with the sum() method
sum(){
var total = 0
// 累加计算checkList数组的每一项的 价格*数量
this.checkList.forEach(item=>{
total+=item.price*item.number
})
return total
},control deletion
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()
},write select all method
handleAllCheck(){
// console.log(this.isAll)
if(this.isAll){
this.checkList = this.datalist
}else{
this.checkList=[]
}
},final code
<!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>This is the learning imitation code, refer to the video written by Mr. Qianfeng kerwin, the link is: [Qianfeng web front-end development project tutorial_1000 episodes from zero basic introduction HTML5+CSS3+JS to proficiency (data includes front-end learning roadmap)-beep Bilibili] https://b23.tv/dJqyfv1