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是否支持按照边权重加粗和大数量展示
一.前言 本文是<知识图谱实战开发案例完全剖析>系列文章和网易云视频课程的番外篇,主要记录学员在知识图谱等相关内容的学习 过程中,提出的共性问题进行展开讨论.该部分内容原始内容记录在网易云 ...
随机推荐
- CF1481X Codeforces Round #699
C Fence Painting(构造) 有用的刷子贪心刷,没用的刷子填在后续的有用/已存在的位置(用个栈记一下就行) D AB Graph(图上构造) 把边当做三种类型,aa bb ab m为奇数时 ...
- 12.19 file 与io流
12.19 file与io流 File 1. 新建文件或者文件夹 新建文件 File F = new File(pathname:"路径+文件名");Boolean flag = ...
- HarmonyOS USB DDK助你轻松实现USB驱动开发
HDF(Hardware Driver Foundation)驱动框架是HarmonyOS硬件生态开放的基础,为开发者提供了驱动加载.驱动服务管理和驱动消息机制等驱动能力,让开发者能精准且高效地开发驱 ...
- linux更新源管理
1.备份源 主要防止在更新了新的源之后出现错误情况,备份一下现有的源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.old 2.编辑sourc ...
- TCP和UDP协议?
TCP(Transmission Control Protocol:传输控制协议:面向连接,可靠传输 UDP(User Datagram Protocol):用户数据报协议:面向无连接,不可靠传输
- IDEA端口占用的解决方案
使用端口查找到对应的进程PID: netstat -ano | findstr "端口" 查找到对应PID的进程信息 tasklist /v /fi "PID eq &l ...
- Jakarta Java Mail属性参数配置
前言 Jakarta Mail网址:https://eclipse-ee4j.github.io/mail SMTP协议可匹配的属性:https://eclipse-ee4j.github.io/ma ...
- 如何在Ubuntu 18.04 LTS上安装和配置MongoDB
MongoDB是一款非关系型数据库,提供高性能,高可用性和自动扩展企业数据库. MongoDB是一个非关系型数据库,因此您不能使用SQL(结构化查询语言)插入和检索数据,也不会将数据存储在MySQL或 ...
- <img> 标签 图片加载失败时候处理方案
应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...
- [开源] 分享自己用的 GitHub 分组管理工具.
CODELF 的 GitHub Star 管理工具, 简洁快速,从开发者角度考虑,用完就走,不给开发者更多的管理负担. http://unbug.github.io/codelf/ 这个工具目前在 G ...