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是否支持按照边权重加粗和大数量展示
一.前言 本文是<知识图谱实战开发案例完全剖析>系列文章和网易云视频课程的番外篇,主要记录学员在知识图谱等相关内容的学习 过程中,提出的共性问题进行展开讨论.该部分内容原始内容记录在网易云 ...
随机推荐
- 如何做一个网站 (C# + MVC Web+ easyUI )
如何做一个网站 小编想做一个网站,采用技术为:C# + MVC Web+ easyUI 小编经过几天的学习,以及指了几位大神指导,初见效果.建立网站的思路:先列举需要用到了几个知识点,然后逐一攻克,然 ...
- Mycat 数据切分 看这一篇就够了
数据切分 数据切分指的是通过某种特定的条件,将我们存放在同一个数据库中的数据分散存放到多个数据库上面,以达到分散单台设备负载的效果. 数据的切分根据其切分规则的类型,可以分为两种切分模式.一种 ...
- Spring bean 和单例bean的线程安全
Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).prototype(原型).request.session和global session,5种作用域说 ...
- Tomcat启动时shell窗口乱码解决方法
tomcat/conf/目录下,修改logging.properties java.util.logging.ConsoleHandler.encoding = utf-8 更改为 java.util ...
- Spring容器 从XML 文件中读取bean的定义，并实例化bean？
解释Spring框架中bean的生命周期. Spring根据bean的定义填充所有的属性. 如果bean实现了BeanNameAware 接口,Spring 传递bean 的ID 到 setBeanN ...
- Kafka 是如何实现高吞吐率的？
Kafka是分布式消息系统,需要处理海量的消息,Kafka的设计是把所有的消息都写入速度低容量大的硬盘,以此来换取更强的存储能力,但实际上,使用硬盘并没有带来过多的性能损失.kafka主要使用了以下几 ...
- SpringBoot Jpa 双数据源mysql + oracle + liquibase+参考源码
一.yml文件配置 spring: # 数据库配置 datasource: primary: jdbc-url: jdbc:mysql://localhost:3306/mes-dev?useUnic ...
- 面试问题之计算机网络：TCP三次握手四次挥手
转载于:https://www.cnblogs.com/Andya/p/7272462.html TCP三次握手: 起初A和B都处于CLOSED关闭状态 B创建TCB,处于LISTEN收听状态,等待A ...
- Spring 框架中的单例 bean 是线程安全的吗?
不,Spring 框架中的单例 bean 不是线程安全的.
- memcached 能接受的 key 的最大长度是多少？
key 的最大长度是 250 个字符.需要注意的是,250 是 memcached 服务器端内 部的限制,如果您使用的客户端支持"key 的前缀"或类似特性,那么 key(前缀 + ...