书籍购物车案例需求:
1、当购买数量为1的时候,减按钮为disabled
2、当我们点击移除的时候,本行数据属性全部删除
3、使用methods方法使得价格可以显示两个小数点且前面永远保留¥符号
4、当全部书籍购物清单被移除的时候,不显示表格,而是显示购物车为空
注意事项:
1、在实现案例的时候注意分为三个文件实现。分别为CSS,JS,HTML文件
2、在HTML文件实现表单显示数据的时候,不要用for循环遍历对象,不然会导致无法操作数量的情况产生
代码实现:
一、准备工作
1、先写出我们需要的CSS样式,这一部分不展开解释
table{
border:1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding:8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
2、写出我们HTML的基本布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div v-if="books.length>=1">
<table>
<thead>
<tr>
<th></th>
<th>书籍</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量&