vue 购物车练习
本人看了vue官网上的教程后，感觉对vue的依稀有点了解，决定动手练习个小功能项目，就找了购物车本项目。
原文链接：http://blog.csdn.net/take_dream_as_horse/article/details/69942013
就找了这个小项目练习，在原项目的基础上做了如下进一步完善
1.增加了商品数量，合计金额(computed计算属性)
2.修改商品单价合计金额同步变化，增加商品(v-model)，
3.增减商品数量(methods)
4.绑定button class背景，根据商品是否已经加入到购物车，动态显示button背景（就是v-bind:class的实际应用）。
5.删除单列商品(object.splice(index,1))
6.添加商品到商品列(对象浅拷贝用到的是object.assign({},obj),深拷贝var obj = JSON.stringify(this.newProduct);this.goods.push(JSON.parse(obj));//深拷贝)
。目前就做了这些改动，就是当练习。
源码：shopping_cart.js
//var newProduct = {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'};
// 商品列表json
var goodsTable = new Vue({
el: '#goods-table',
data: {
// 用于保存每件商品的对象
goodItem: {},
// 用于保存用户添加到购车的商品数组
buyLists: [],
// 默认的商品列表
goods: [
{name:'iphone 7 plus 手机',color:'银色',price:100,amount:0,default_nums:1,add_nums:0},
{name:'华硕笔记本电脑',color:'黑色',price:100,amount:0,default_nums:1,add_nums:0},
{name:'九阳电热水瓶5L',color:'白色',price:100,amount:0,default_nums:1,add_nums:0}
],
//用于增加新商品到列表
newProduct: {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'},
},
computed: {
count: function() {
var num = 0;
for(var i in this.goods){
num += parseInt(this.goods[i].default_nums);
}
return num;
},
total: function() {
var total = 0;
for(var i in this.goods){
total += parseInt(this.goods[i].price * this.goods[i].default_nums);
}
return total;
},
addShoppingNum: function() {
var addShoppingNum = 0;
for(var i in this.goods){
addShoppingNum += this.goods[i].add_nums;
}
return addShoppingNum;
},
costPaid: function() {
var costPaid = 0;
for(var i in this.goods){
costPaid += parseInt(this.goods[i].price * this.goods[i].add_nums);
}
return costPaid;
}
},
methods: {
reduce: function(good) {
if (good.default_nums <= 1) return;
good.default_nums --;
//good.ischange = 'btn-danger';
},
addNum: function(good) {
good.default_nums += 1;
//good.ischange = 'btn-danger';
},
addProduct: function() {
//var len = this.goods.length;
//追加商品
//this.goods.push(Object.assign({},this.goods[len-1]));//浅拷贝
//this.goods.push(Object.assign({}, this.newProduct));//浅拷贝
var obj = JSON.stringify(this.newProduct);
this.goods.push(JSON.parse(obj));//深拷贝
},
removeProduct: function(good,index) {
//删除商品
this.goods.splice(index,1);
},
addToCar(good) {
if(good.add_nums == good.default_nums) return;
good.add_nums = good.default_nums;
//good.ischange = 'btn-success';
this.goodItem = {name: good.name, nums: good.add_nums};
// 创建用户当前添加的商品对象
// 开始向数组中提添加当前物品，这里存在3种情况
// 1、用户未添加过该商品，则直接向数组中push
// 2、用于已经添加了该商品、并且未做购买数量修改，则不向数组中添加
// 3、用于已经添加了该商品、但是修改了购买数量，直接替换数组中的该商品对象
var index = this.buyLists.findIndex((value, index, arr) => {
return value.name === this.goodItem.name;
});
//Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem);
},
balance() {
console.log(this.buyLists);
}
}
})
源码：shopping_cart.html
<!DOCTYPE html>
<html>
<head>
<title>添加购物车商品列表</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
[v-cloak]{ /*防止页面闪烁*/
display: none !important;
}
.content{
width: 1000px;
margin: 100px auto;
}
.sWidth{
width:50px;
}
</style>
</head>
<body> <div class="content">
<!-- 商品列表 -->
<table class="table table-bordered" id="goods-table" v-cloak>
<thead>
<th>序号</th>
<th>商品名称</th>
<th>颜色</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(good, index) in goods">
<td>{{ index+1 }}</td>
<td><input v-model="good.name"></td>
<td><input class="sWidth" v-model="good.color"></td>
<td>
<button v-on:click="reduce(good)">-</button>
<input type="text" type="number" v-model="good.default_nums"/>
<button v-on:click="addNum(good)">+</button>
</td>
<td>
<input class="sWidth" v-model="good.price"></span>
</td>
<td>
<span>{{good.price*good.default_nums}}</span>
</td>
<td>
<button class="btn btn-sm" v-bind:class="good.default_nums == good.add_nums ? 'btn-success' : 'btn-danger'" v-on:click="addToCar(good)">加入购物车</button>
<span>已加入购物车的该商品数量:</span>
<span>{{good.add_nums}}</span>
<button class="btn btn-sm btn-danger" v-on:click="removeProduct(good,index)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<button class="btn btn-danger" v-on:click="addProduct()">添加商品</button>
<span>合计数量{{count}}件</span>
<span>合计金额{{total}}元</span>
<b>||</b>
<span>购物车{{addShoppingNum}}件</span>
<span>花费{{costPaid}}元</span>
<button class="btn btn-danger pull-right" v-on:click="balance()">结算</button>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- js -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/shopping_cart.js"></script> </body>
</html>
页面显示效果：
github地址：https://github.com/double2018/shopping_cart/
vue 购物车练习的更多相关文章
- Vue购物车实例
<div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...
- vue购物车和地址选配（三）
参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...
- vue购物车功能源码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- Vue购物车
index.html <!DOCTYPE html><html> <head> <meta charset="utf-8&quo ...
- VUE购物车示例
代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...
- vue购物车的实现
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue购物车动画效果
使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...
- 第八十三篇：Vue购物车(四) 总价计算
好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...
- 第八十二篇：Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
随机推荐
- 自学Python之路
自学Python之路[第一回]:初识Python 1.1 自学Python1.1-简介 1.2 自学Python1.2-环境的搭建:Pycharm及python安装详细教程 1.3 ...
- License友好的前端组件合集
在做Web开发过程中,不可避免的会用到各种UI组件.通常,我们并不会需要什么组件,都去自己开发的,网上有那么多好用的,我们为什么要自己造轮子呢?我通常只会在网上找不到合适的组件时,才会去自己开发一套. ...
- python串口调试，M3650B-HA调试
使用python serial与M3650B-HA(RFID读写器)串口通信 环境:py3.6 模块:pyserial 1.serial模块安装2.废话不多说,直接上代码,测试环境py3.6 # co ...
- Swagger文档添加file上传参数写法
想在swagger ui的yaml文档里面写一个文件上传的接口,找了半天不知道怎么写,终于搜到了,如下: /tools/upload: post: tags: - "tool" s ...
- ucore lab1 bootloader学习笔记
---恢复内容开始--- 开机流程回忆 以Intel 80386为例,计算机加电后,CPU从物理地址0xFFFFFFF0(由初始化的CS:EIP确定,此时CS和IP的值分别是0xF000和0xFFF0 ...
- discuz管理员登录进入后台管理马上跳转到登录界面
昨天尝试了一下这个discuz论坛,感觉还可以.今天刚刚用管理员账户进入后台管理,准备改一改界面熟悉一下,过不了10秒钟.老是马上就退出来了.我想起来了,昨天是在阿里云服务器上面直接登录这个管理员账号 ...
- Time Complexity of Loop with Powers
以下功能的时间复杂度是多少? void fun(int n, int k) { for (int i=1; i<=n; i++) { int p = pow(i, k); for (int j= ...
- 新手了解.Nat
1.Net平台 -->.Net平台 -->.Net FrameWrok框架 2.C#编程语言 -->编程语言:计算机能听懂的语言 -->使用.Net平台 C#是在.NEt平台 ...
- MyBatis小抄
持续更新中. Every MyBatis application centers around an instance of SqlSessionFactory A cleaner approch t ...
- jmeter中一次运行多条sql语句
操作比较简单,主要就分两步: 第一步:在JDBC Connection Configuration中设置,主要见下图标注部分增加:?allowMultiQueries=true 第二步:在JDBC R ...