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 ...
随机推荐
- 如何把git仓库（包含所有提交历史）迁移到gitlab
在gitlab上new 一个project 跳转到本地的git 目录中,运行命令 git remote add gitlab gitlab_new_project_address -最后运行如下命令, ...
- MVC+EF 入门教程（三）
一.前言 上一节,我们将了生成数据库,那么这张我就将操作设计库. 二.在 Aplication 定义服务 在 Application 中添加文件夹(Blog)和 操作类(BlogServer).实例如 ...
- On-Heap与Off-Heap
和C#里的托管代码.非托管代码类似
- PHP是干什么用？
掌握PHP就是使用电脑制定规则.框架tp3.2/5.2 在结构化编程中,程序围绕着要解决的任务来设计. 面向对象编程中,程序围绕着问题域中的对象来设计. 面对对象的识别事物的方式: ●类比----&g ...
- SoapUI模拟soap接口返回不同响应（通过groovy脚本）
一.创建soap项目,输入wsdl文件,然后生成SOAP Mock Service,再生成测试用例,然后新建新的响应 WSDL文件:MathUtil.wsdl <?xml version=&qu ...
- 【python】元组
Python 3.6.0 (v3.6.0:41df79263a11, Dec 23 2016, 07:18:10) [MSC v.1900 32 bit (Intel)] on win32Type & ...
- iOS voip电话和sip软电话 --网络电话
一|介绍1.两者区别: SIP软电话与IP电话在技术上属于同一类型,只是SIP软电话是使用电脑软件实现的,而IP电话有一部分是在话机中直接写入了程序,可以通过硬件直接使用.IP(简称VoIP,源自英语 ...
- 关于spring mybateis 定义resultType="java.util.HashMap"
关于spring mybateis 定义resultType="java.util.HashMap" List<HashMap<String, Object>& ...
- CSS篇（上）
紧接着HTML篇的CSS篇开啦,老铁们快来围观... 1.介绍一下标准的CSS盒子模型?低版本IE的盒子模型有什么不同? 1>有两种:IE盒子模型 W3C盒子模型 2>盒模型:内 ...
- Xamarin android使用Sqlite做本地存储数据库
android使用Sqlite做本地存储非常常见(打个比方就像是浏览器要做本地存储使用LocalStorage,貌似不是很恰当,大概就是这个意思). SQLite 是一个软件库,实现了自给自足的.无服 ...