Vue实现简单购物车小案例
本文实例为大家分享了Vue实现简单购物车的具体代码，供大家参考，具体内容如下 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>Document</title> <link r
### Vue实现简单购物车小案例知识点解析
#### 一、项目概述
本案例通过使用Vue框架来构建一个简单的购物车应用。此应用可以展示不同商品的信息，并允许用户增减商品的数量以及移除商品。购物车的总价也会实时更新。
#### 二、技术栈
- **前端框架**：Vue.js
- **语言**：HTML、CSS、JavaScript
- **工具**：浏览器（用于测试）
#### 三、项目结构与文件
- **HTML页面**：负责显示购物车内的商品列表。
- **CSS样式表**：定义页面的基本样式。
- **JavaScript (Vue)**：控制页面的逻辑和数据绑定。
#### 四、HTML页面解析
```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>Document</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
<!-- 购物车列表 -->
<div v-if="books.length != 0">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 遍历商品 -->
<tr v-for="(item, index) in books">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
<td>{{ item.price | showPrice }}</td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">-</button>
{{ item.count }}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<!-- 总价 -->
<h2>总价格为：{{ totalPrice | showPrice }}</h2>
</div>
<!-- 购物车为空时的提示 -->
<h2 v-else>购物车为空</h2>
</div>
<!-- 引入Vue.js库 -->
<script src="/js/vue.js"></script>
<!-- 自定义Vue业务逻辑 -->
<script src="/js/index.js"></script>
</body>
</html>
```
- **页面布局**：使用表格来展示商品信息，包括ID、名称、出版日期、价格、数量和操作按钮。
- **条件渲染**：通过`v-if`判断是否显示商品列表或空购物车提示。
- **事件绑定**：每个商品的操作按钮都绑定了相应的点击事件，如增减数量、移除商品等。
- **自定义过滤器**：使用`showPrice`过滤器格式化价格显示。
#### 五、CSS样式解析
```css
* {
margin: 0;
padding: 0;
}
table {
margin: 100px 0 0 100px;
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: black;
font-weight: 600;
}
h2 {
width: 500px;
margin-left: 100px;
}
button {
padding: 5px;
}
```
- **基本样式**：重置所有元素的默认外边距和内边距。
- **表格样式**：设置表格的边框、间距等属性。
- **标题样式**：设置标题的背景色、字体颜色和加粗程度。
- **按钮样式**：设置按钮的填充。
#### 六、Vue.js解析
```javascript
const app = new Vue({
el: "#app",
data: {
books: [
{ id: 1, name: '《算法导论》', date: '2019-2', price: 85.00, count: 1 },
{ id: 2, name: '《计算机基础》', date: '2019-2', price: 95.00, count: 1 },
{ id: 3, name: '《c++高级语言》', date: '2019-2', price: 89.00, count: 1 },
{ id: 4, name: '《编译原理》', date: '2019-2', price: 77.00, count: 1 },
]
},
methods: {
decrement(index) {
this.books[index].count--;
},
increment(index) {
this.books[index].count++;
},
removeHandle(index) {
this.books.splice(index, 1);
}
},
computed: {
totalPrice() {
let finalPrice = 0;
for (let i = 0; i < this.books.length; i++) {
finalPrice += this.books[i].price * this.books[i].count;
}
return finalPrice;
}
},
filters: {
showPrice(price) {
return '￥' + price.toFixed(2);
}
}
});
```
- **数据初始化**：定义了一个名为`books`的数组，包含了四个对象，每个对象代表一个商品。
- **方法定义**：
- `decrement`：减少指定索引的商品数量。
- `increment`：增加指定索引的商品数量。
- `removeHandle`：删除指定索引的商品。
- **计算属性**：`totalPrice`用于计算购物车中所有商品的总价。
- **过滤器**：`showPrice`用于格式化价格显示。
#### 七、运行结果
- 用户可以看到购物车中的商品列表，包括每本书的信息（ID、名称、出版日期、价格）和数量。
- 用户可以通过点击“+”和“-”按钮来增加或减少商品的数量。
- 当商品数量减少到1以下时，“-”按钮会禁用。
- 用户可以点击“移除”按钮来删除某件商品。
- 页面会实时显示当前购物车的总价。
- 如果购物车为空，则显示“购物车为空”的提示信息。
#### 八、总结
通过本案例的学习，我们了解了如何使用Vue.js构建一个简单的购物车应用。该应用不仅展示了Vue的基本功能，还涉及到了事件处理、数据绑定、条件渲染、循环遍历等多种技巧。这对于初学者来说是非常好的实践机会。
