vue购物车的实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后盾人-购物车</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="app">
<div class="row" >
<template v-if="goods.length==0">
<div class="panel panel-default">
<div class="panel-body">
<p>购物车空空如也~~</p>
</div>
</div>
</template>
<template v-else>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">购物车</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>
<input type="checkbox" @click="selecAll" v-model="allChecked">
</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,k) in goods">
<td>
<input type="checkbox" @click="select(v.id)" :checked="allSelectData.indexOf(v.id)!=-1">
<!--<input type="checkbox" @click="select(v.id)" :checked="allSelectData.indexOf(v.id)!=-1">-->
</td>
<td>{{v.name}}</td>
<!--<td>{{v.price}}</td>-->
<td><input type="text" v-model="v.price"></td>
<td>
<button @click="reduce(v,k)">-</button>
<input type="text" v-model="v.num" style="width: 30px;text-align: center">
<button @click="plus(k)">+</button>
</td>
<td>{{v.price*v.num}}</td>
<td>
<div class="btn-group btn-group-xs">
<!--删除方法一-->
<!--<button @click="del(k)" type="button" class="btn btn-danger">删除</button>-->
<!--删除方法二-->
<button @click="goods.splice(k,1)" type="button" class="btn btn-danger">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer" style="text-align: right">
共计 <span>{{totalPrice}}</span> 元
</div>
</div>
</template>
</div>
</div>
<script>
var data = [1,2,6,7,8,9];
//检测元素是否在数组中
// console.log(data.indexOf(1));
new Vue({
el:'#app',
data:{
//购物车数据
goods:[
{id:1,name:'联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',price:999,num:1},
{id:2,name:'一加手机6 8GB+128GB 亮瓷黑 全面屏双摄游戏手机 全网通4G 双卡双待 骁龙845',price:3599,num:1},
{id:3,name:'小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏，',price:2599,num:1},
{id:4,name:'OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信',price:2699,num:1},
{id:5,name:'Apple MacBook Air 13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内',price:6588,num:1},
{id:6,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色(Core i7 处理器/16GB内存/256GB ',price:12277,num:1},
{id:7,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core ',price:17588,num:3},
{id:8,name:'Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机 【支持移动联通4G】',price:6999,num:1},
{id:9,name:'Apple 苹果 iPhone X手机 银色 全网通64G 【6.5白条全场三期免息】下单送透明壳',price:7498,num:1},
{id:10,name:'Apple 苹果X iPhoneX 全面屏手机 银色 全网通 256G 【京仓配送 时效快捷 】入仓',price:8738,num:1},
],
//控制全选
allChecked:false,
//商品数据选中
allSelectData : [],
// allSelectData2 : [],
},
mounted(){
//控制加载完页面全部选中
this.goods.forEach((v,k)=>{
this.allSelectData.push(v.id);
})
this.allChecked=true;
},
methods:{
//购物车数量增加
plus(k){
this.goods[k].num++;
},
//购物车数量减少
reduce(v,k){
//方法一
// this.goods[k].num--;
// if(this.goods[k].num==0){
// this.goods.splice(k,1);
// }
//方法二:
v.num--;
if(v.num==0){
this.goods.splice(k,1);
}
},
//购物车删除
del(k){
this.goods.splice(k,1);
},
//单击全选按钮
selecAll(){
// console.log(event.currentTarget.checked);
console.log(!this.allChecked);
// if(!event.currentTarget.checked){
if(this.allChecked){
//取消全选
this.allSelectData = [];
}else{
//全选
this.goods.forEach((v,k)=>{
this.allSelectData.push(v.id);
})
}
},
select(id){
//知道当前点击商品对应的商品编号是否在allSelectData数组中
var res = this.allSelectData.indexOf(id);
res == -1 ? this.allSelectData.push(id) : this.allSelectData.splice(res,1);
this.allChecked = this.goods.length == this.allSelectData.length;
}
},
computed:{
totalPrice(){
var total=0;
this.goods.forEach((v,k)=>{
var res = this.allSelectData.indexOf(v.id);
//计算总价只计算在allSelectData商品
if(res != -1){
total += v.num * v.price;
}
})
return total;
}
}
})
</script>
</body>
</html>
效果:
vue购物车的实现的更多相关文章
- Vue购物车实例
<div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...
- vue 购物车练习
本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/ar ...
- 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购物车动画效果
使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...
- 第八十三篇：Vue购物车(四) 总价计算
好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...
- 第八十二篇：Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
随机推荐
- 【好书推荐】《剑指Offer》之软技能
俗话说,对于程序员来讲,每年都应该出去面试一下,看看自己的技术能力在外面处于什么水平.程序员在一个公司一个环境一个业务干得太久,很容易丧失学习的动力,获得的仅仅是从新手到熟手.当然,我相信在各行各业均 ...
- Oracle视图，索引，序列
什么是视图[View] (1)视图是一种虚表 (2)视图建立在已有表的基础上, 视图赖以建立的这些表称为基表(3)向视图提供数据内容的语句为 SELECT 语句,可以将视图理解为存储起来的 SELEC ...
- 操作手册_MyEclipse
前言 假 如 你 的 人 生 有 理 想,那 么 就 一 定 要 去 追,不 管 你 现 在 的 理 想 在 别 人 看 来是 多 么 的 可 笑 , 你 也 不 用 在 乎 , 人 生 蹉 跎 几 ...
- JavaSE_2_关键字
1.介绍一下Syncronized锁,如果用这个关键字修饰一个静态方法,锁住了什么?如果修饰成员方法,锁住了什么? synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下四种: ...
- vue3.0学习笔记（一）
一.搭建工作环境环境 1.从node.js官网下载相应版本进行安装即可 https://nodejs.org/zh-cn/download/,安装完成后在命令行输入 node -v 如果可以查询到版 ...
- springboot 学习笔记（六）
(六)springboot整合activemq 1.现下载activemq,下载链接:http://activemq.apache.org/download.html,windows系统解压后进入bi ...
- Spring MVC的测试
测试是保证软件质量的关键. 与 Spring MVC 相关的测试,主要涉及控制器的测试. 为了测试Web项目通常不需要启动项目,需要一些Servlet相关的一些模拟对象,比如MockMVC.MockH ...
- MvvmCross框架在XamarinForms中的使用入门
做XamarinForms快一年了,最近趁着项目不是很紧,有点空闲的时间,研究了一下MvvmCross这个框架,感觉挺高大上的.一边研究一下写点入门的东西吧,大部分的东西github都有. 1添加Pa ...
- 介绍一款渗透神器——Burp Suite
Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HTTP 消息,持久性,认证,代 ...
- linux 命令——43 killall(转）
Linux 系统中的killall命令用于杀死指定名字的进程(kill processes by name).我们可以使用kill命令杀死指定进程PID的进 程,如果要找到我们需要杀死的进程,我们还需 ...