mirror of
https://github.com/Dichgrem/Vue.git
synced 2025-12-16 13:41:59 -05:00
106 lines
2.5 KiB
HTML
106 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Vue3 小型购物车</title>
|
|
<script src="https://unpkg.com/vue@3"></script>
|
|
<style>
|
|
table thead tr {
|
|
background-color: #ffebcd;
|
|
}
|
|
|
|
table {
|
|
margin: 0 auto;
|
|
border: 1px solid #989898;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #989898;
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
button {
|
|
margin: 0 2px;
|
|
padding: 2px 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h2>购物车表格</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>书籍名称</th>
|
|
<th>出版日期</th>
|
|
<th>价格</th>
|
|
<th>购买数量</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(book, index) in books" :key="book.id">
|
|
<td>{{ index + 1 }}</td>
|
|
<td>{{ book.name }}</td>
|
|
<td>{{ book.date }}</td>
|
|
<td>￥{{ book.price.toFixed(2) }}</td>
|
|
<td>
|
|
<button @click="increase(book)">+</button>
|
|
{{ book.count }}
|
|
<button @click="decrease(book)">-</button>
|
|
</td>
|
|
<td>
|
|
<button @click="remove(index)">移除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 style="text-align:center;">总价：￥{{ totalPrice.toFixed(2) }}</h3>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue;
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
books: [
|
|
{ id: 1, name: '《JavaScript程序设计》', date: '2022-9', price: 85.0, count: 1 },
|
|
{ id: 2, name: '《C语言基础》', date: '2021-2', price: 59.0, count: 1 },
|
|
{ id: 3, name: '《Java高级语言编程》', date: '2022-10', price: 39.0, count: 1 },
|
|
{ id: 4, name: '《数据库原理》', date: '2023-3', price: 128.0, count: 1 },
|
|
{ id: 5, name: '《计算机网络》', date: '2022-8', price: 88.0, count: 1 }
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
totalPrice() {
|
|
return this.books.reduce((sum, book) => sum + book.price * book.count, 0);
|
|
}
|
|
},
|
|
methods: {
|
|
increase(book) {
|
|
book.count++;
|
|
},
|
|
decrease(book) {
|
|
if (book.count > 1) book.count--;
|
|
},
|
|
remove(index) {
|
|
this.books.splice(index, 1);
|
|
}
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|