细节未展现，需要自提
1. 实现功能
虽然这个项目花费时间不多，但是涉及的知识点还是很多的。首先，当我们要做一个项目的时候，需要深入了解项目，这里仅从其实现功能分析。为了偷懒，这里小编就把只用1个文件实现，不推荐哟~
- 删除功能（单个删除与批量删除）
- 添加功能（未实现）
- 计算总价
最终效果
2. 步骤
写这个步骤纯粹是为了让自己更熟练，仅供参考~
2.1 搭建框架和完成交互
其实这一步就是写html和javascript、vue类的（标题好听一些~~）
习惯用table写这类demo，还有其他合适的方法，可以分享在评论区哟~或者私聊，共同进步 。。
2.1.1 框架
话不多说，直接上代码
<div id="app">
<div id="cart" v-if="isShow">
<table >
<tr>
<th><input type="checkbox" @click="getAll" v-model:checked="alldone"> </th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="item.name" v-if="!item.doDel">
<td><input type="checkbox" @click="item.isdone=!item.isdone" v-model:checked="item.isdone"></td>
<td>{{item.name}}</td>
<td>{{toNum(item.price)}}</td>
<td>
<button @click="Decrement(item,index)">-</button>
{{item.count}}
<button @click="Increment(item)">+</button>
</td>
<td>
<button @click="deleteItem(index)">删除</button>
</td>
</tr>
</table>
<div id="MyFooter">
<div>共计￥{{toNum(totalPrice)}}</div>
<div><button @click="pDelete">批量删除</button></div>
</div>
</div>
<div v-else id="other">
<h2>购物车空空如也~</h2>
</div>
</div>
2.1.2 交互代码块
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
list:[
{
name:'鲁路修',
price:12.00,
count:1,
isdone:false,
doDel:false
},
{
name:'深海',
price:11.00,
count:1,
isdone:false,
doDel:false
},
{
name:'西瓜书',
price:13.00,
count:1,
isdone: false,
doDel:false
},
{
name:'99',
price:15.00,
count:1,
isdone:false,
doDel:false
},
],
alldone:false,
isShow:true
},
computed:{
totalPrice(){
account=0
for(item of this.list){
// alert(item.price)
if(item.isdone) {
account += item.price * item.count
}
}
return account
}
},
methods:{
Decrement(item,index){
if(item.count == 0){
this.deleteItem(index)
return
}
item.count--
},
Increment(item){
item.count++
},
getAll(){
this.alldone = !this.alldone
if(this.alldone){
for(item of this.list){
item.isdone = true
}
}
else {
for(item of this.list){
item.isdone = false
}
}
},
deleteItem(index){
this.list.splice(index,1)
},
pDelete(){
j=0
for(let i=0;i<this.list.length;i++){
if(this.list[i].isdone){ //被选中
this.list[i].doDel = true //表示要被删除了
this.list[i].isdone =false // 记得去掉选中
j++
}
}
if(j == this.list.length){
// 表示没有东西在购物车里了~
this.isShow = false
}
},
toNum(val){
return val.toFixed(2) //保留两位小数
}
},
watch:{
list:{
handler(val,oldVal){
// console.log(val)
if(val.length == 0 ){
// 表示没有东西在购物车里了~
this.isShow = false
}
j = 0
for(i of val){
if(i.isdone){
j++
}
}
if(j == val.length){
this.alldone=true
}else{
this.alldone=false
}
},
deep:true //深度监听 可以监听到对象、数组的变化
}
}
})
</script>
2.2 完成样式
body{
margin: 0;
padding: 0;
}
button {
background-color: #676767; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
#cart,#other{
width: 700px;
margin: 20px auto;
}
table
{
border-collapse: collapse;
text-align: center;
table-layout: fixed;
width:100%;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
#MyFooter{
position: relative;
width: 100%;
top: 5px;
}
#MyFooter div button{
position: absolute;
top: 0;
right:0;
}
</style>
3. 遇到的难点
3.1 全选与全不选
记得看视频的时候看到过，真正自己练习的时候，就感觉到有点吃力，固然还是得多练习，而且实现的时候代码量一点也不少。。最后用到了方法和深度监听。。。
3.2 批量删除
这个问题，困扰了我一会，就是本人知识范围里删除要一个一个删，我还瞎想着有没有可能同步异步能解决问题，半小时没解决。。我就采用了v-if来实现，也是耍了点小聪明，如果有大佬知道如何更好地批量删除，希望能私发给小编呀~
4. 代码
小白一个，代码还有许多不足，还请多多指教哇~
最后这个webstorm的格式，我没找到在哪调，所以只能这样了，知道的小伙伴可以告诉我哇~，感谢收看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<style>
body{
margin: 0;
padding: 0;
}
button {
background-color: #676767; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
#cart,#other{
width: 700px;
margin: 20px auto;
}
table
{
border-collapse: collapse;
text-align: center;
table-layout: fixed;
width:100%;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
#MyFooter{
position: relative;
width: 100%;
top: 5px;
}
#MyFooter div button{
position: absolute;
top: 0;
right:0;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div id="cart" v-if="isShow">
<table >
<tr>
<th><input type="checkbox" @click="getAll" v-model:checked="alldone"> </th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="item.name" v-if="!item.doDel">
<td><input type="checkbox" @click="item.isdone=!item.isdone" v-model:checked="item.isdone"></td>
<td>{{item.name}}</td>
<td>{{toNum(item.price)}}</td>
<td>
<button @click="Decrement(item,index)">-</button>
{{item.count}}
<button @click="Increment(item)">+</button>
</td>
<td>
<button @click="deleteItem(index)">删除</button>
</td>
</tr>
</table>
<div id="MyFooter">
<div>共计￥{{toNum(totalPrice)}}</div>
<div><button @click="pDelete">批量删除</button></div>
</div>
</div>
<div v-else id="other">
<h2>购物车空空如也~</h2>
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
list:[
{
name:'鲁路修',
price:12.00,
count:1,
isdone:false,
doDel:false
},
{
name:'深海',
price:11.00,
count:1,
isdone:false,
doDel:false
},
{
name:'西瓜书',
price:13.00,
count:1,
isdone: false,
doDel:false
},
{
name:'99',
price:15.00,
count:1,
isdone:false,
doDel:false
},
],
alldone:false,
isShow:true
},
computed:{
totalPrice(){
account=0
for(item of this.list){
// alert(item.price)
if(item.isdone) {
account += item.price * item.count
}
}
return account
}
},
methods:{
Decrement(item,index){
if(item.count == 0){
this.deleteItem(index)
return
}
item.count--
},
Increment(item){
item.count++
},
getAll(){
this.alldone = !this.alldone
if(this.alldone){
for(item of this.list){
item.isdone = true
}
}
else {
for(item of this.list){
item.isdone = false
}
}
},
deleteItem(index){
this.list.splice(index,1)
},
pDelete(){
j=0
for(let i=0;i<this.list.length;i++){
if(this.list[i].isdone){ //被选中
this.list[i].doDel = true //表示要被删除了
this.list[i].isdone =false // 记得去掉选中
j++
}
}
if(j == this.list.length){
// 表示没有东西在购物车里了~
this.isShow = false
}
},
toNum(val){
return val.toFixed(2) //保留两位小数
}
},
watch:{
list:{
handler(val,oldVal){
// console.log(val)
if(val.length == 0 ){
// 表示没有东西在购物车里了~
this.isShow = false
}
j = 0
for(i of val){
if(i.isdone){
j++
}
}
if(j == val.length){
this.alldone=true
}else{
this.alldone=false
}
},
deep:true //深度监听 可以监听到对象、数组的变化
}
}
})
</script>
</body>
</html>