效果
点击增加数量，总价格随之改变
数量为1时，减少数量按钮无法被点击
移除按钮将此书籍从表单移除，并且总价格变化
移除全部书后，隐藏表单，只显示：购物车为空
<!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>
<style>
/* 总组，字体大小 */
.zu {
font-size: 26px;
}
/* 合并单元格框 */
table {
border-collapse: collapse;
}
/* 表头 */
th {
border: #cccccc solid 2px;
height: 60px;
background-color: #e6e6e6;
}
/* 内容单元格 */
tbody tr td {
height: 50px;
border: #cccccc solid 2px;
text-align: center;
}
/* 移除按钮 */
.btnhandle {
width: 60px;
height: 30px;
}
/* 按钮大小 */
button {
width: 30px;
height: 30px;
}
/* 设置每个列的宽度 */
.xuhao {
width: 60px;
}
.xuhao2 {
width: 300px;
}
.xuhao3 {
width: 150px;
}
.xuhao4 {
width: 150px;
}
.xuhao5 {
width: 150px;
}
.xuhao6 {
width: 100px;
}
</style>
</head>
<body>
<!--
步骤：
1.制作表头固定内容表格（thead），调整css样式
2.先动态的创建行（遍历创建v-for），同时手动创建对应数量的td（不使用遍历创建的原因：遍历之后设置价格样式、计算总价、按钮的创建都很麻烦）
3.动态的从数组获取信息，填入td中（mustache写法提取数组中对象的属性值）
4.完事表格（按钮补充、按钮内容、小数点保留后两位（.tofixed）、
5.此时表格创建完毕，信息填入完毕
6.给购买数量按钮绑定点击事件：@click/ （按钮不可用状态判断）
7.移除按钮绑定点击事件：splice删除（当移除全部书籍后，隐藏界面，显示：购物车为空）
8.计算总价格：先计算出每类书籍总价格，最后求和。+=
-->
<div class="zu">
<div v-if='books.length'>
<!-- 判断书籍数量，当存在书籍时显示下列信息，反之 -->
<table>
<thead>
<tr class="head">
<th></th>
<th>名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="firsttr" v-for='(item,index) in books'>
<td class="xuhao">{{item.id}}</td>
<td class="xuhao2">{{item.bname}}</td>
<td class="xuhao3">{{item.date}}</td>
<td class="xuhao4">{{getPrice(item.price)}}</td>
<td class="xuhao5">
<button class="reduce" @click='reduceNum(index)'
:disabled='item.num<=1'>-</button><span>{{item.num}}</span><button class="add"
@click='addNum(index)'>+</button>
</td>
<td class="xuhao6"><button class="btnhandle" @click='removeBtn(index)'>{{item.handle}}</button></td>
</tr>
</tbody>
</table>
<div class="total">
<div>总价格为：{{addPrice}}</div>
</div>
</div>
<!-- 当删除所有的书籍时，隐藏全部，显示下列内容 -->
<div v-else>购物车为空</div>
</div>
<!-- -->
<script src="./js文件/vue.js"></script>
<script>
const zu = new Vue({
el: '.zu',
data: {
//books是数组，里面由多个对象组成。所以我们提取的是数组里面的对象里的属性值：books[索引号].属性名
books: [{
id: 1,
bname: '《格列夫》',
date: '2021-2',
price: 85,
num: 1,
handle: '移除'
},
{
id: 2,
bname: '《JS基础理论与实践》',
date: '2021-4',
price: 44,
num: 1,
handle: '移除'
},
{
id: 3,
bname: '《无情》',
date: '2021-8',
price: 48,
num: 1,
handle: '移除'
},
{
id: 3,
bname: '《格列夫》',
date: '2021-1',
price: 102,
num: 1,
handle: '移除'
},
]
},
//方法：
methods: {
//价格显示函数：保留后两位小数
getPrice(price) {
return '￥' + price.toFixed(2)
},
//增加数量事件
addNum(index) {
this.books[index].num++ //数组里的第index个元素的num进行递加
},
//减少数量事件
reduceNum(index) {
this.books[index].num-- //数组里的第index个元素的num进行递减
},
//移除按钮事件
removeBtn(index) {
this.books.splice(index, 1) //用法：数组名.splice(被删除项目的索引号，要删除的个数)
}
},
//计算属性
computed: {
//计算总价格的函数
addPrice() {
let totalnum = 0
for (let i = 0; i < this.books.length; i++) { //遍历的计算每个书籍的总价格，迭代相加
totalnum += this.books[i].num * this.books[i].price //计算公式：数量*价格
}
return totalnum //给调用者返回值
}
}
})
</script>
</body>
</html>
未入门的大白菜