标签：count index Vue price 购物车 案例 books data 书籍
利用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
}
}
})
标签：count,index,Vue,price,购物车,案例,books,data,书籍 来源： https://blog.csdn.net/weixin_47016497/article/details/113743375
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。