51 lines
1.4 KiB
HTML
51 lines
1.4 KiB
HTML
<!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>购物清单</title>
|
||
<link rel="stylesheet" href="../css/css.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- tr 为行，td 为列 -->
|
||
<div id="app">
|
||
<div v-if="list.length">
|
||
<h2>教材购物清单</h2>
|
||
<table>
|
||
<!-- 表头区域 -->
|
||
<tr class="header">
|
||
<td>教材编号</td>
|
||
<td>教材名称</td>
|
||
<td>教材出版日期</td>
|
||
<td>教材价格</td>
|
||
<td>数量</td>
|
||
<td>操作</td>
|
||
</tr>
|
||
<!-- 表格内容区域 -->
|
||
<tr v-for="item,index in list">
|
||
<td>{{item.bid}}</td>
|
||
<td class="bookname">{{item.bna}}</td>
|
||
<td>{{item.dates}}</td>
|
||
<td>{{item.price|PriceFilters}}</td>
|
||
<td class="counts">
|
||
<button @click="addBc(index,$event)" >+</button>
|
||
{{item.couts}}
|
||
<button @click="delBc(index,$event)" >-</button>
|
||
</td>
|
||
<td class="btn">
|
||
<button @click="RemoveItem(index)">移除</button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<h2>总价钱:{{TotalPrice()|PriceFilters}}</h2>
|
||
</div>
|
||
<h2 v-else>你的购物清单已为空</h2>
|
||
</div>
|
||
</body>
|
||
<script src="../js/vue.min.js"></script>
|
||
<script src="../js/index.js"></script>
|
||
|
||
</html> |