利用Vue实现购物车的简单运用
- 借助layui框架实现组件（如table）的快速搭建
- 通过Vue实现从后端获取数据到前端的展示
- 实现移除书籍功能（添加和修改书籍信息功能暂未实现）
- 实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化
…
程序效果截图
实现代码
- 首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述）
- 创建html、css和JavaScript目录
html
<!DOCTYPE html><html><head><metacharset="utf-8"><title>书籍购物车</title><!-- 导入layui的css文件 --><linkrel="stylesheet"href="../layui/css/layui.css"/><!-- 自带样式 --><styletype="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><divid="app"><h2style="text-align: center;font-weight: 100;color: #009688;">购物车</h2><divv-if="books.length"><!-- 创建表单 --><tableclass="layui-table"><colgroup><colwidth="100"><colwidth="200"><col></colgroup><thead><tr><th><iclass="layui-icon layui-icon-release"style="font-size: 30px;color: #1E9FFF;"></i></th><thstyle="text-align: center;">书籍名称</th><thstyle="text-align: center;">出版时间</th><thstyle="text-align: center;">价格</th><thstyle="text-align: center;">购买数量</th><thstyle="text-align: center;">操作</th></tr></thead><tbody><trv-for="(item,index) in books"><tdstyle="text-align: center;">{{item.id}}</td><td>{{item.name}}</td><td>{{item.data}}</td><td>{{item.price|showPrice}}</td><td><buttonclass="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><buttonclass="layui-btn layui-btn-primary layui-btn-xs sbtn"@click="inbtnClick(index)">+</button></td><tdstyle="text-align: center;"><buttonclass="layui-btn layui-btn-primary removebtn"@click="removebtn(index)">移除</button></td></tr><tr><td>总价格</td><tdcolspan="5"style="text-align: right;">{{totlePrice|showPrice}}</td></tr></tbody></table></div><divv-else>购物车为空</div></div></body><!-- 导入vue关键js代码 --><scriptsrc="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script><scriptsrc="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><scriptsrc="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script><!-- 导入layui关键js代码 --><scriptsrc="../layui/layui.js"></script><!-- 导入功能实现的js代码 --><scriptsrc="main.js"></script></html>JavaScript
newVue({
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=0for(let i=0;i<this.books.length;i++){
totlePrice+=this.books[i].price*this.books[i].count}return totlePrice}}})