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是否支持按照边权重加粗和大数量展示
一.前言 本文是<知识图谱实战开发案例完全剖析>系列文章和网易云视频课程的番外篇,主要记录学员在知识图谱等相关内容的学习 过程中,提出的共性问题进行展开讨论.该部分内容原始内容记录在网易云 ...
随机推荐
- Zabbix 4.4管理界面中文乱码解决方法
1.zabbix 4.4 安装配置过程可参考官方文档: 文档链接地址:https://www.zabbix.com/download?zabbix=4.4&os_distribution=ce ...
- java对xml文件的操作
xml文件格式(示例): <?xml version="1.0" encoding="UTF-8"?> <root> <Funct ...
- 【网鼎杯2020青龙组】Web WriteUp
AreUSerialz 打开题目直接给出了源代码 <?php include("flag.php"); highlight_file(__FILE__); class Fil ...
- HT4936S锂电池充放电芯片，充电宝芯片
应用电路 引脚定义 参考 http://www.hotchip.com.cn/products/
- dfs:10元素取5个元素的组合数
#include "iostream.h" #include "string.h" #include "stdlib.h" int sele ...
- JVM分析工具与查看命令
1.概述 无可避免地,我们都需要用到多线程的一天.单纯地使用多线程的参数设置,比如-Xms.-Xmx.-Xss等,还不足够,我们还要学会如何分析JVM里面的线程状况. 在进行java程序问题定位时,内 ...
- Chroot 特性 ?
3.2.0 版本后,添加了 Chroot 特性,该特性允许每个客户端为自己设置一个命名 空间.如果一个客户端设置了 Chroot,那么该客户端对服务器的任何操作,都将 会被限制在其自己的命名空间下. ...
- consumer提交offset原理
1 数据结构 消费者的消费状态是保存在SubscriptionState类中的,而SubscriptionState有个重要的属性那就是assignment保存了消费者消费的partition及其pa ...
- 哪一个 bash 内置命令能够进行数学运算?
bash shell 的内置命令 let 可以进行整型数的数学运算. #! /bin/bash - - let c=a+b - -
- 解释 MySQL 外连接、内连接与自连接的区别 ?
先说什么是交叉连接: 交叉连接又叫笛卡尔积,它是指不使用任何条件,直接将一 个表的所有记录和另一个表中的所有记录一一匹配. 内连接 则是只有条件的交叉连接,根据某个条件筛选出符合条件的记录,不符合 条 ...