实现购物车的页面,完成购物车的基本操作
首先实现html代码,将购物车的主体大致构建出来,然后再利用vue进行功能的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box" >
<table>
<thead>
<!-- 购物车标头 -->
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<!-- 显示购物车内容 -->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice(item.price)}}</td>
<td>
<button @click="del(index)" :disabled="item.count<=1">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</td>
<td>
<button @click="move(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<!-- 商品总价 -->
总价格:{{totalPrice | showPrice}}
</div>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>
css代码:
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0ch;
}
th,td{
padding: 10;
border: 1px solid #b6b3b3;
text-align: center;
width: auto;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
width:100px;
}
简单的构建出来效果之后,开始进行一些功能的实现
商品数量的增加与减少
添加
添加功能比较容易实现,只需要简单的绑定个函数,使数量自增,就可以实现具体内容 add(index){
// 数量自增
this.books[index].count++;
},
减少
数量的减少相对会麻烦一点,这时候需要考虑商品的数量不能为负数,并且在购物车中我们一般会考虑商品数量至少为1,如果和增加一样的操作的话,只使数量自减,那么会使商品为负数,所以这里使用了一个**disabled**的属性,当商品数量降为1时,**disabled设置为true**,使得按钮失效,以此来实现具体功能。 <td>
<button @click="del(index)" :disabled="item.count<=1">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</td>
del函数不再重复,与自增函数类似,主要是使用了动态绑定disabled的用法,使得按钮失效!
移除功能
对于移除功能,我们需要的效果是直接删除该行,那么这个是不难实现的,我们可以利用**splice**来删除该行产生的问题:
- id 这时候需要注意id,即商品的编号,如果我们删除了第一个商品,后面的编号为2 3 4的话,那样岂不是显得我们傻傻的,这不是我们的作风,于是在删除之后,我再次遍历该数组,重新给编号赋值!
move(index){
// 删除操作
this.books.splice(index,1);
// 进行删除操作之后,将id修改一下,符合购物车排序
for(let i = 0; i<this.books.length;i++){
this.books[i].id=i+1;
}
- 当购物车商品都被移除完之后,显示一个空白的页面岂不是很丢前端的颜面,所以可以用v-if进行判断一下数组的长度是否为0,如果为0,那么就显示购物车为空,否则正常显示
<div id="box" >
<div v-if="books.length">
<table>
.
.
.
</table>
<!-- 商品总价 -->
总价格:{{totalPrice | showPrice}}
</div>
<div v-else>
<h1>购物车为空</h1>
</div>
</div>
商品总额
商品总额的话即为商品数量乘以价格,只需要遍历一边即可,不再赘述了,这时候我用了一个过滤器的写法,使得价格会保留两位数字,这种方法比较简洁,便于使用,可以尝试一下 computed: {
// 计算总额
totalPrice(){
let totalprice=0
for(let i = 0;i < this.books.length; i++){
totalprice += this.books[i].count*this.books[i].price;
}
return totalprice;
}
},
总体思路以及重点代码的解释就说到这里了,实现起来并不算很难,主要是要学会其中解决问题的思路,下面附上完整的代码
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box" >
<div v-if="books.length">
<table>
<thead>
<!-- 购物车标头 -->
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<!-- 显示购物车内容 -->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice(item.price)}}</td>
<td>
<button @click="del(index)" :disabled="item.count<=1">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</td>
<td>
<button @click="move(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<!-- 商品总价 -->
总价格:{{totalPrice | showPrice}}
</div>
<div v-else>
<h1>购物车为空</h1>
</div>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>
style.css
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0ch;
}
th,td{
padding: 10;
border: 1px solid #b6b3b3;
text-align: center;
width: auto;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
width:100px;
}
main.js
const app = new Vue({
el:"#box",
data:{
books:[
{
id:1,
name:'《算法设计》',
date:'2020-6',
price:76.00,
count:1
},
{
id:2,
name:'《操作系统》',
date:'2020-7',
price:109,
count:1
},
{
id:3,
name:'《java程序设计》',
date:'2020-2',
price:89.00,
count:1
},
{
id:4,
name:'《前端养成计划》',
date:'2020-1',
price:99.00,
count:1
},
]
},
computed: {
// 计算总额
totalPrice(){
let totalprice=0
for(let i = 0;i < this.books.length; i++){
totalprice += this.books[i].count*this.books[i].price;
}
return totalprice;
}
},
filters:{
showPrice(price){
// 过滤器将价格保留两位数字
return '¥'+price.toFixed(2);
}
},
methods: {
del(index){
// /数量自减
this.books[index].count--;
},
add(index){
// 数量自增
this.books[index].count++;
},
move(index){
// 删除操作
this.books.splice(index,1);
// 进行删除操作之后,将id修改一下,符合购物车排序
for(let i = 0; i<this.books.length;i++){
this.books[i].id=i+1;
}
}
},
})
实现效果:
删除第二个商品之后,id跟着改变
商品全部移除