这个案例比较简单，同时也使用了比较多的模板语法。例如书籍列表展示使用v-for，点击购买数量使用v-on,总价使用computed属性，将所有书籍移除完会显示一个新的页面，使用v-if。
做这个的时候遇到两个小问题：
1，methods本来应该在 Vue.createApp里面，结果我把data一折叠，将methods属性放外面去了。
2，template只有v-for,v-if可以使用，v-show不能和template结合在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue2</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
}
table,
th,
td {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<!-- template里面不能放v-show -->
<template v-if="bookList.length > 0">
<h2>{{message}}</h2>
<table>
<thead>
<tr>
<th></th>
<th>书籍</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-for="(item, index) in bookList">
<tr>
<td>{{ index + 1 }}</td>
<td>{{ item.bookName }}</td>
<td>{{ item.bookTime }}</td>
<td>{{ item.bookPrice }}</td>
<td>
<button @click="decrement(item.bookId)" :disabled="item.bookCount === 0 ? true : false">-</button>
{{ item.bookCount }}
<button @click="increment(item.bookId)">+</button>
</td>
<td>
<button @click="removeBook(item.bookId)">移除</button>
</td>
</tr>
</template>
</tbody>
</table>
<div>总价：￥{{ totalPrice }}</div>
</template>
<template v-else>
<h2>您没有书籍需要购买</好>
</template>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "书籍购物车",
bookList: [
{
bookId: 10086,
bookName: "<算法导论>",
bookTime: "2006-9",
bookPrice: "85",
bookCount: "1",
},
{
bookId: 10087,
bookName: "<UNIX编程艺术>",
bookTime: "2006-2",
bookPrice: "59",
bookCount: "1",
},
{
bookId: 10088,
bookName: "<编程珠玑>",
bookTime: "2006-10",
bookPrice: "35",
bookCount: "1",
},
{
bookId: 10089,
bookName: "<代码大全>",
bookTime: "2006-3",
bookPrice: "185",
bookCount: "1",
},
],
};
},
methods: {
increment(id) {
this.bookList.map((item) => {
if (item.bookId === id) {
item.bookCount++;
}
});
},
decrement(id) {
this.bookList.map((item) => {
if (item.bookId === id && item.bookCount > 0) {
item.bookCount--;
}
});
},
removeBook(id) {
let book = this.bookList.filter((item) => {
return id !== item.bookId;
});
this.bookList = book;
},
},
computed: {
totalPrice() {
let sum = 0;
this.bookList.map((item) => {
sum += item.bookPrice * item.bookCount;
});
return sum;
},
},
});
//挂载
app.mount("#app");
</script>
</body>
</html>
