Vue实现购物车
开发需求
使用vue实现购物商场中的购物车内容，添加、减少会自动机计算总金额，并显示当前总金额。删除商品则将改商品移除购物车列表，并且自动计算购物车列表的总金额。
实现原理
这里没有api数据接口，我们这里创建一个数组，数组中的每一项是一个对象，每一个对象包含着每一本的信息(名称、价格等)。表头写死，表中的每一个行用v-for遍历数组数据，v-for遍历数组中有多少个对象（多少本书）将自动创建多少个标签(行)。然后将数据绑定到对应的列中就完成大致的布局了。
在图书价格列中，因为我们在原来的数据中每本书的价格(price)写的是数字形式(45.00)，但需要在购物车列表中展示的是带有中文货币符(￥45.00)。这样我们就可以使用过滤器(filters)对price进行处理再展示在购物车列表中。
传入price 返回￥+price 且保留两位小数
filters: {
fullPrice(price) {
return `￥${price.toFixed(2)}`
}
}
在图书数量列中，我们要加入两个按钮分别是 - 和 +，- 操作减少商品数量，当商品数量为1时，禁止点击。因为商品数量至少为1，通过不喜欢该商品则删除操作就好了。+ 操作增加商品数量。
button标签有个属性disabled，当disabled属性为true时，button就无法点击了
vue用v-bind绑定disabled，当该项的数量(count) 小于等于1时，为true，禁止点击。
<button
v-bind:disabled="item.count <= 1"
@click="item.count--"
>-button>
删除操作非常简单，分别给每一行加入删除按钮并绑定deteleBook事件且传入该项索引。使用splice方法进行删除该项就行了。因为vue是数据响应式，只要删除data中的数据，页面也会跟着刷新。
deteleBook(index) {
this.books.splice(index, 1)
}
splice(从第几位开始，删几位，新增的数据)
计算总金额也是简单，用computed计算属性，遍历数组数据，就每一个对象的数量 x 价格 再相加就是总金额了
totalPrice() {
let totalPrice = 0
for(let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice.toFixed(2)
}
定义一个变量，变量数组，使变量加等于没一个对象(每本书)的数量 x 价格,最后返回这个变量且保留两位小数。
效果图
代码
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>Vue图书购物车title>
<style>
table{border: 1px solid #c7c7c7;border-collapse: collapse;}
thead{color: #5c6b77; background-color: #f6f6f6;}
th, td{padding: 8px 20px; border: 1px solid #c7c7c7;}
style>
head>
<body>
<div id="app">
<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.nubmer}}td>
<td>{{item.name}}td>
<td>{{item.date}}td>
<td>{{item.price | fullPrice}}td>
<td>
<button
v-bind:disabled="item.count <= 1"
@click="item.count--"
>-button>
{{item.count}}
<button @click="item.count++">+button>
td>
<td><button @click="deteleBook(index)">删除button>td>
tr>
tbody>
table>
<h2>合计：{{totalPrice}}h2>
div>
<script src="../js/vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
books: [
{
nubmer: '94124',
name: '《追风筝的人》',
date: '2003-5',
price: 45.00,
count: 1
},
{
nubmer: '86154',
name: '《活着》',
date: '1993',
price: 29.90,
count: 1
},
{
nubmer: '35849',
name: '《白夜行》',
date: '1999-8',
price: 44.70,
count: 1
},
{
nubmer: '16781',
name: '《麦田里的守望者》',
date: '1951-7',
price: 23.00,
count: 1
}
]
},
methods: {
// 删除操作
deteleBook(index) {
this.books.splice(index, 1)
}
},
filters: {
fullPrice(price) {
return `￥${price.toFixed(2)}`
}
},
computed: {
totalPrice() {
let totalPrice = 0
for(let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice.toFixed(2)
}
}
})
script>
body>
html>