Il s'agit d'un simple panier écrit d'après la vidéo de M. Qianfeng Kerwin. Il est écrit en vue3 et le logiciel utilise vscode. Pour des ressources vidéo détaillées, voir le lien
Introduire l'adresse de vue3
<script type="text/javascript" src="https://unpkg.com/vue@next"> </script>Ajuster le format général de la page
<style>
/* 使得能够排在一行上 */
li {
display:flex;
justify-content:space-around;
padding:10px;
}
li img{
width:100px;
}
</style>La photo vient de 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"Calculer le montant total avec la méthode sum()
sum(){
var total = 0
// 累加计算checkList数组的每一项的 价格*数量
this.checkList.forEach(item=>{
total+=item.price*item.number
})
return total
},contrôler la suppression
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()
},écrire sélectionner tout la méthode
handleAllCheck(){
// console.log(this.isAll)
if(this.isAll){
this.checkList = this.datalist
}else{
this.checkList=[]
}
},code définitif
<!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>Ceci est le code d'imitation d'apprentissage, reportez-vous à la vidéo écrite par M. Qianfeng kerwin, le lien est : [Qianfeng web front-end development project tutorial_1000 episodes from zero basic introduction HTML5+CSS3+JS to proficiency (les données incluent l'apprentissage frontal feuille de route)-bip Bilibili] https://b23.tv/dJqyfv1