Vue实战-购物车案例
Vue实战-购物车案例
普通购物车
实现的功能：添加商品到购物车，计算总价
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
th,td{
text-align: center;
}
</style>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">购物车案例</h2>
<table class="table table-bordered table-hover">
<!--表头-->
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>添加购物车</th>
</tr>
<!--表体-->
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="data"></td>
</tr>
</table>
<!--购物车选中状态 -->
<hr>
<p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
<p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
<!--计算总价-->
<hr>
总价:{{totalPrice()}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//商品数据
dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
checkGroup: [],
},
methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
}
}
})
</script>
</html>
PS：for循环的多种形式
上面我们使用
for (i in 数组/对象)的形式，在js中for循环常用的形式有四种
//方式一： i是索引,循环选中的商品，基于迭代的循环
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
// 方式二： 基于索引的循环，最普通的
for (var i=0;i<this.checkGroup.length;i++) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
//方式三： 基于迭代 for of (es6)
for (v of this.checkGroup) {
total += v.price * v.number
}
// 方式四：forEach 可迭代对象(数组)的方法，数组而言v是值，i是索引
this.checkGroup.forEach(function(v,i){
this.checkGroup.forEach((v,i)=>{
total += v.price * v.number
})
进阶购物车
一键加入购物车功能实现
基于普通购物车实现功能：一键添加购物车功能
通过v-model双向绑定实现，input框绑定change事件， checkbox选中true反之false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
th,td{
text-align: center;
}
</style>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">购物车案例</h2>
<table class="table table-bordered table-hover">
<!--表头-->
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<!-- <th>添加购物车</th>-->
<th>全选/取消全选 <input type="checkbox" v-model="checkall" @change="handleAll"></th>
</tr>
<!--表体-->
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>{{data.number}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
</tr>
</table>
<!--购物车选中状态 -->
<hr>
<p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
<p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
<!--计算总价-->
<hr>
<p style="font-size: 20px">总价:{{totalPrice()}}￥</p>
<hr>
<!--是否全选-->
<!-- <p>是否全选： {{checkall}}</p>-->
<div style="font-size: 20px">
<p v-if="checkall === false">是否全选：否 --- {{checkall}}</p>
<p v-else-if="checkall === true">是否全选：是 --- {{checkall}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//商品数据
dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
checkGroup: [],
//全选,默认不全选
checkall:false
},
methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//处理全选
handleAll(){
if (this.checkall){
//全选
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全选
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全选
}else {
this.checkall=false
}
}
}
})
</script>
</html>
商品数量加减的实现
实现功能：通过添加+，-样式来控制商品数量的加减
注意：这里暂时不考虑库存的情况，且减少商品数量做单独处理，解决减少数量小于1的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
th,td{
text-align: center;
}
</style>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">购物车案例</h2>
<table class="table table-bordered table-hover">
<!--表头-->
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<!-- <th>添加购物车</th>-->
<th>全选/取消全选 <input type="checkbox" v-model="checkall" @change="handleAll"></th>
</tr>
<!--表体-->
<tr v-for="data in dataList">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td>
<!-- 商品减少 -->
<button @click="handleCount(data)">-</button>
{{data.number}}
<!-- 商品增加 -->
<button @click="data.number++">+</button>
</td>
<td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
</tr>
</table>
<!--购物车选中状态 -->
<hr>
<p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
<p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
<!--计算总价-->
<hr>
<p style="font-size: 20px">总价:{{totalPrice()}}￥</p>
<hr>
<!--是否全选-->
<!-- <p>是否全选： {{checkall}}</p>-->
<div style="font-size: 20px">
<p v-if="checkall === false">是否全选：否 --- {{checkall}}</p>
<p v-else-if="checkall === true">是否全选：是 --- {{checkall}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//商品数据
dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
checkGroup: [],
//全选,默认不全选
checkall:false
},
methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//处理全选
handleAll(){
if (this.checkall){
//全选
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全选
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全选
}else {
this.checkall=false
}
},
//商品减少
handleCount(data){
if (data.number<=1){
alert('不能再少了')
}
else {
data.number--
}
}
}
})
</script>
</html>
不足：下面的提示信息可以隐藏，个人只是为了提示，商品删除没有写自行实现
如有错误请指正感谢~
Vue实战-购物车案例的更多相关文章
- Vue(五) 购物车案例
这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...
- vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
- vue实战记录（四）- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- vue实战记录（三）- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
- vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue实战记录（一）- vue实现购物车功能之前提准备
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...
- 知识图谱实战开发案例剖析-番外篇（1）- Neo4j是否支持按照边权重加粗和大数量展示
一.前言 本文是<知识图谱实战开发案例完全剖析>系列文章和网易云视频课程的番外篇,主要记录学员在知识图谱等相关内容的学习 过程中,提出的共性问题进行展开讨论.该部分内容原始内容记录在网易云 ...
随机推荐
- JavaWeb——服务器
作用:服务器是一种被动的操作,用来处理用户的一些请求和给用户的一些响应 相关软件:tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jaka ...
- mysql优化参数 （汇总）
1 如下为128G内存32线程处理器的mariadb配置参数优化: [client]#password= your_passwordport= 3306 socket= /tmp/mysql.sock ...
- 什么是CPI
请参考这篇博客,很全面的解释了CPI https://www.cnblogs.com/diegodu/p/9366639.html
- VUE常见问题
VUE常见问题 对于MVVM的理解 MVVM 是 Model-View-ViewModel 的缩写 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑 View 代表UI 组件, ...
- 编写 Java 程序时, 如何在 Java 中创建死锁并修复它？
经典但核心Java面试问题之一.如果你没有参与过多线程并发 Java 应用程序的编码,你可能会失败.
- Jinkins流水线脚本使用curl命令调用服务接口，并且使用url传参。
curl http://xxx.xx.xx.xx:xxxx/jenkins/publish?fileName=${fileName}&tag_name=${tag_name} 如图调用不符合c ...
- pg数据库排序和limit同时使用遇到的奇怪问题
这两天由于一位实习生同事回学校答辩,因此我来跟进他之前开发的功能进行测试,测试反馈上来这么一个问题: 也就是说下面这两条sql查询出来的数据前10条的数据不一样. select * from tabl ...
- Java如何声明一个数组？JS如何声明一个数组？如何获取数组长度
1 Long[] numbers; //一般使用的定义方式,可分为静态和动态两种定义方式,下有说明. 2 Long numbers[]; //跟上面用法一致. 3 Long... numbers; / ...
- new String比字符串池浪费空间,为什么要用它?
对于下面程序中:ss0 = new String( "hello" );是用new()来新建对象的,存于堆中.每调用一次就会创建一个新的对象.当然从节省空间的角度来讲,肯定不如st ...
- 进入React的世界
一. React 是什么 1. 声明式写法 2. 组件化 3. 一次学习, 随处编写 二. 为什么要学习React 1. 大厂加持 - Facebook 2. 最流行, 使用人数最多, 最被开发者喜爱 ...