题目:
使用Vue完成简易购物车案例
题目要求:
1.作出如图的展示效果
2.点击购买加号则数量增加,总价格随之更变
3.如果书本数量为1则不能减少
4.点击移除,删除该行,总价格随之更变
5.使用VUE + HMLT 实现该案例
思路:
在vue的视频里讲过一个类似的案例(这里为了动图演示方便,我把删除提示框去掉了),自动更新价格的方法视频里没有讲过,需要使用computed关键字,剩下的部分在视频案例的基础上修改即可。
演示过程:
代码如下:
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>简易购物车</title>
</head>
<body>
<div id="app">
<!-- 设置表格表格边框为1px,宽为整个屏幕的35%,单元格间距为0 -->
<table id="t1" border="1px" width="35%" cellspacing="0">
<!-- 设置第一行背景色为灰色,居中显示 -->
<tr bgcolor="#D3D3D3" align="center">
<!-- 设置字体为加粗 -->
<td></td>
<td><b>书籍名称</b></td>
<td><b>出版日期</b></td>
<td><b>价格</b></td>
<td><b>购买数量</b></td>
<td><b>操作</b></td>
</tr>
<!-- 循环打印出书籍信息 -->
<tr v-for="(book,index) in books " align="center">
<td>{{index +1}}</td>
<td>{{book.name}}</td>
<td>{{book.date}}</td>
<td>¥{{book.price.toFixed(2)}} </td>
<!-- 当点击对应按钮,调用对应功能,其中当购买数量等于1时,不能在减少了 -->
<td><input :disabled="book.num <= 1" type="button" id="b1" value="-" @click="subNum(index)">
{{book.num}} <input type="button" id="b2" value="+" @click="addNum(index)"></td>
<td><input type="button" @click="deleteItem(index)" value="移除"> </td>
</tr >
</table>
<h2>总价格:¥{{totalPrice}}</h2>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
//书籍信息
books:[{
name:"《java编程思想》",
date:"2020-9",
price:98.00,
num:1,
},
{
name:"《数据分析与数据原理》",
date:"2020-2",
price:39.00,
num:1,
},
{
name:"《Hadoop权威指南》",
date:"2020-10",
price:59.00,
num:1,
},
{
name:"《代码大全》",
date:"2018-8",
price:128.00,
num:1,
}],
},
methods:{
// 删除该行数据信息方法
deleteItem(index){
this.books.splice(index,1)
},
// 书籍数量减少
subNum(index){
this.books[index].num--
},
// 书籍数量增加
addNum(index){
this.books[index].num++
}
},
// 自动计算总价格
computed:{
totalPrice(){
var totalPrice=0;
for(let i in this.books){
totalPrice += this.books[i].price * this.books[i].num
}
return totalPrice;
}
}
})
</script>
</html>