利用Vue实现购物车的简单运用
- 借助layui框架实现组件（如table）的快速搭建
- 通过Vue实现从后端获取数据到前端的展示
- 实现移除书籍功能（添加和修改书籍信息功能暂未实现）
- 实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化
…
程序效果截图
实现代码
- 首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述）
- 创建html、css和JavaScript目录
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书籍购物车</title>
<!-- 导入layui的css文件 -->
<link rel="stylesheet" href="../layui/css/layui.css" />
<!-- 自带样式 -->
<style type="text/css">
#app {
width: 700px;
height: 320px;
margin: 100px auto;
}
.layui-table {
width: 700px;
}
.layui-table th {
text-align: center;
line-height: normal;
}
.sbtn {
width: 20px;
}
</style>
</head>
<body>
<div id="app">
<h2 style="text-align: center;font-weight: 100;color: #009688;">购物车</h2>
<div v-if="books.length">
<!-- 创建表单 -->
<table class="layui-table">
<colgroup>
<col width="100">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>
<i class="layui-icon layui-icon-release" style="font-size: 30px; color: #1E9FFF;"></i>
</th>
<th style="text-align: center;">书籍名称</th>
<th style="text-align: center;">出版时间</th>
<th style="text-align: center;">价格</th>
<th style="text-align: center;">购买数量</th>
<th style="text-align: center;">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td style="text-align: center;">{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>{{item.price|showPrice}}</td>
<td>
<button class="layui-btn layui-btn-primary layui-btn-xs sbtn"
@click="debtnClick(index)"
:disabled="item.count<=1"
:class="{ 'layui-btn-disabled':item.count<=1}">-</button>
<label>{{item.count}}</label>
<button class="layui-btn layui-btn-primary layui-btn-xs sbtn"
@click="inbtnClick(index)">+</button>
</td>
<td style="text-align: center;">
<button class="layui-btn layui-btn-primary removebtn"
@click="removebtn(index)">移除</button>
</td>
</tr>
<tr>
<td>总价格</td>
<td colspan="5" style="text-align: right;">{{totlePrice|showPrice}}</td>
</tr>
</tbody>
</table>
</div>
<div v-else>购物车为空</div>
</div>
</body>
<!-- 导入vue关键js代码 -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<!-- 导入layui关键js代码 -->
<script src="../layui/layui.js"></script>
<!-- 导入功能实现的js代码 -->
<script src="main.js"></script>
</html>
JavaScript
new Vue({
el: '#app',
data: {
// 书籍数据
books: [{
id: 1,
name: '《算法导论》',
data: '2006-09',
price: '85.00',
count: '1'
},
{
id: 2,
name: '《UNIX编程艺术》',
data: '2006-02',
price: '59.00',
count: '1'
},
{
id: 3,
name: '《数据库》',
data: '2008-10',
price: '39.00',
count: '1'
},
{
id: 4,
name: '《代码大全》',
data: '2006-03',
price: '128.00',
count: '1'
},
]
},
// 过滤器
filters: {
showPrice(price) {
return '￥' + parseFloat(price).toFixed(2)
}
},
methods: {
// 书籍数量减少
debtnClick(index) {
this.books[index].count--
},
// 书籍数量增加
inbtnClick(index) {
this.books[index].count++
},
// 移除书籍
removebtn(index){
this.books.splice(index,1)
}
},
computed:{
// 计算总价格
totlePrice(){
let totlePrice=0
for(let i=0;i<this.books.length;i++){
totlePrice+=this.books[i].price*this.books[i].count
}
return totlePrice
}
}
})