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 ...
随机推荐
- iOS开发之JSON转PLIST（把存储json格式的文件转换成plist文件）
p.p1 { margin: 0.0px 0.0px 0.0px 60.0px; font: 16.0px "PingFang SC"; color: #586e75 } p.p2 ...
- 比最差的API(ETW)更差的API(LTTng)是如何炼成的, 谈如何写一个好的接口
最近这几天在帮柠檬看她的APM系统要如何收集.Net运行时的各种事件, 这些事件包括线程开始, JIT执行, GC触发等等. .Net在windows上(NetFramework, CoreCLR)通 ...
- 【ANT】创建删除目录，复制移动重命名文件
一.创建目录: <?xml version="1.0"?> <project default="test_mkdir"> <tar ...
- 【Zookeeper】源码分析之服务器（三）之LeaderZooKeeperServer
一.前言 前面分析了ZooKeeperServer源码,由于QuorumZooKeeperServer的源码相对简单,于是直接分析LeaderZooKeeperServer. 二.LeaderZooK ...
- bash shell快捷键[转]
生活在 Bash shell 中,熟记以下快捷键,将极大的提高你的命令行操作效率. 编辑命令 Ctrl + a :移到命令行首 Ctrl + e :移到命令行尾 Ctrl + f :按字符前移(右向) ...
- 2018第一发：记一次【Advanced Installer】打包之旅
一.前言 2017年最后几天,你们都高高兴兴的跨年,博主还在加班制作.net安装包.因为年前要出来第一版的安装包,所以博主是加班加点啊.本来想用VS自带的制作工具,不过用过的人都知道,真是非常好(to ...
- Java 包装类Integer的值比较
对于包装类型Integer的值比较与int的值比较是不同的: public class Java_Val_Compare { public static void main(String[] ar ...
- flex基础示例
flex的一些基础用法: <!-- Flex布局已经得到了所有浏览器的支持:chrome21+.Opera12.1+.Firefox22+.safari6.1+.IE10+ Webkit内核浏览 ...
- Rstudio( bioconductor)下载太慢，用国内镜像
在Rstudio中,下载软件install.packages()和 bioconductor软件下载命令 source("http://bioconductor.org/biocLite.R ...
- Maven的下载、安装与环境配置
在创建一个项目时,搭建环境往往是编写具体代码的先决条件,而获取到所有需要的jar包是其中的重中之重.起初,人们在需要jar包的时候总会在网上四处查找,而且如果不知道某jar包版本的更迭,写出的代码或许 ...