购物车
需求分析
- 展示已加如购物车的商品列表，包含商品名称、商品单价、购买数量和操作信息。
- 实时显示购买的总价。
- 购买数量可以增加或减少。
- 每类商品还可以从购物车中移除。
项目文件
- index.html：引入资源及模板
- index.js：Vue实例及业务代码
- style.css：样式
项目代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车示例</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th>全选<input type="checkbox" v-model="checkAll"></input></th>
<th>序号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list">
<td><input type="checkbox" :checked="item.done" @change="checkShop(index)" /></td>
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button type="button" @click="handleReduce(index)"
:disabled="item.count == 1">-</button>
{{item.count}}
<button type="button"
@click="handleAdd(index)">+</button>
</td>
<td>
<button type="button" @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价：￥{{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iPhone 7',
price:6188,
count:1,
done:false
},
{
id:2,
name:'iPad Pro',
price: 5888,
count:1,
done:false
},
{
id:3,
name:'MacBook Pro',
price:21488,
count:1,
done:false
}
]
},
computed:{
totalPrice:function(){
var total = 0;
for (var i = 0; i < this.list.length; ++i){
var item = this.list[i];
if (item.done == false){
continue;
}
total += item.price * item.count;
}
return total.toString().replace(/\d(?=(?:\d{3})+\b)/g, '$&,');
},
checkAll:{
get:function(){
var flag = true;
this.list.forEach((item)=>{
if (item.done == false) flag = false;
})
return flag;
},
set:function(value){
this.list.forEach((item)=>{
item.done = value;
})
}
}
},
methods:{
handleReduce:function(index){
if (this.list[index].count == 1) return;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index, 1);
},
checkShop:function(index){
this.list[index].done = !this.list[index].done;
}
}
})
style.css
[v-cloak]{
display:none;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th, td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
运行效果
