Vue购物车展示功能
1.基本购物车
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.number}}</td>
<td><input type="checkbox" :value="good" v-model="checkGroup"></td>
</tr>
</tbody>
</table>
<hr>
选中了：{{checkGroup}}
<h3>总价格：{{getPrice()}}</h3>
<h3>选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面。函数就会重新执行</h3>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
good_list: [
{id: 1, name: '钢笔', price: 12, number: 2},
{id: 2, name: '脸盆', price: 20, number: 20},
{id: 3, name: '毛笔', price: 6, number: 9},
{id: 4, name: '圆珠笔', price: 8, number: 5},
{id: 5, name: '铅笔', price: 1, number: 3},
],
checkGroup: [],
},
methods:{
// 1 根据checkGroup选中的计算
// 循环checkGroup 拿出价格*数量 累加 最后返回
getPrice(){
var total = 0
for (item of this.checkGroup){
total += item.price * item.number
}
return total
}
}
})
</script>
2.带全选 / 全不选功能购物车
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>商品ID</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.number}}</td>
<td><input type="checkbox" :value="good" v-model="checkGroup" @change="handlecCheckOne"></td>
</tr>
</tbody>
</table>
<hr>
选中了：{{checkGroup}}
<h3>总价格：{{getPrice()}}</h3>
<h3>选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面，函数就会重新执行</h3>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 2},
{id: 2, name: '脸盆', price: 20, number: 20},
{id: 3, name: '毛笔', price: 6, number: 9},
{id: 4, name: '圆珠笔', price: 8, number: 5},
{id: 5, name: '铅笔', price: 1, number: 3},
],
checkGroup: [],
checkAll:false,
},
methods: {
getPrice() {
// 1 根据checkGroup选中的，计算
// 循环checkGroup，拿出价格*数量，累加，最后返回
var total = 0
for (item of this.checkGroup) {
total += item.number * item.price
}
return total
},
handleCheckAll(){
if (this.checkAll){
this.checkGroup = this.good_list
}else {
this.checkGroup = []
}
},
handlecCheckOne(){
if (this.checkGroup.length===this.good_list.length){
this.checkAll = true
}else {
this.checkAll = false
}
},
}
})
</script>
3.购物车带加减商品功能
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>商品ID</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button class="btn" @click="handleJian(good)">-</button>
{{good.number}}
<button class="btn" @click="handleJia(good)">+</button>
</td>
<td><input type="checkbox" :value="good" v-model="checkGroup" @change="handlecCheckOne"></td>
</tr>
</tbody>
</table>
<hr>
选中了：{{checkGroup}}
<h3>总价格：{{getPrice()}}</h3>
<h3>选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面，函数就会重新执行</h3>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 1},
{id: 2, name: '脸盆', price: 20, number: 1},
{id: 3, name: '毛笔', price: 6, number: 1},
{id: 4, name: '圆珠笔', price: 8, number: 1},
{id: 5, name: '铅笔', price: 1, number: 1},
],
checkGroup: [],
checkAll: false,
},
methods: {
getPrice() {
// 1 根据checkGroup选中的，计算
// 循环checkGroup，拿出价格*数量，累加，最后返回
var total = 0
for (item of this.checkGroup) {
total += item.number * item.price
}
return total
},
handleCheckAll() {
if (this.checkAll) {
this.checkGroup = this.good_list
} else {
this.checkGroup = []
}
},
handlecCheckOne() {
if (this.checkGroup.length === this.good_list.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
handleJian(good) {
if (good.number > 1) {
good.number--
} else {
alert('不能再删了')
}
},
handleJia(good) {
good.number++
},
}
})
</script>
Vue购物车展示功能的更多相关文章
- 第八十二篇：Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
- vue实现搜索功能
vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- python实现简单的循环购物车小功能
python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...
- Vue.js 基本功能了解
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- python3 练习题(用函数完成登录注册以及购物车的功能)
''' 用函数完成登录注册以及购物车的功能 作业需求: 1,启动程序,用户可选择四个选项:登录,注册,购物,退出. 2,用户注册,用户名不能重复,注册成功之后,用户名密码记录到文件中. 3,用户登录, ...
- Vue.js 基本功能了解一下~
一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...
- JS实现购物车动态功能
整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...
- 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
- vue 中展示PDF内容
vue 中展示PDF内容 不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
随机推荐
- vm 虚拟机总是蓝屏 移除打印机和声卡 移除这俩硬件 （大文件用飞秋传输）
vm 虚拟机总是蓝屏 移除打印机和声卡 移除这俩硬件 (大文件用飞秋传输)
- etcd每个节点都存储了完整的键值对数据集，为什么扩容etcd集群仍可分散存储压力？
etcd每个节点都存储了完整的键值对数据集,这主要是为了确保数据的一致性和高可用性.在这种设计下,任何一个节点都可以处理读取请求,并在本地提供数据,从而无需跨节点通信.这种冗余的数据存储方式也增加了系 ...
- k8s标签的增删改查和选择器
在 Kubernetes(K8s)中,标签(Label)是与资源对象相关联的键值对,用于实现多维度的资源分组管理功能.下面是关于 Kubernetes 标签的增删改查操作的简要说明: 查询标签 (查) ...
- netty Recycler对象池
前言 池化思想在实际开发中有很多应用,指的是针对一些创建成本高,创建频繁的对象,用完不弃,将其缓存在对象池子里,下次使用时优先从池子里获取,如果获取到则可以直接使用,以此降低创建对象的开销. 我们最熟 ...
- 视野修炼-技术周刊第76期 | Rolldown 开源
欢迎来到第 76 期的[视野修炼 - 技术周刊],下面是本期的精选内容简介 强烈推荐 Rolldown 开源 - Rollup 的锈化版 前端调试工具超全汇总 开源工具&技术资讯 OhMyLi ...
- 大年学习linux（第六节---软件安装）
六.软件安装 rpm RPM软件包的管理工具 补充说明 rpm命令 是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功 ...
- linux介绍、安装、shell
1-Linux发展介绍 零 什么是Linux Linux:和我们常见的Windows一样,都是操作系统,但不同的是: Windows: 收费,不开源,主要用于日常办公.游戏.娱乐多一些. Linux: ...
- ProtoBuf-gRPC实践
目录介绍 01.gRPC学习背景 1.1 为什么要学RPC 1.2 RPC是什么 1.3 网络库收益分析 1.4 学习计划说明 1.5 学习问题思考 02.ProtoBuf的介绍 2.1 ProtoB ...
- 《.NET内存管理宝典 》（Pro .NET Memory Management） 阅读指南 - 第3章
本章勘误: 暂无,等待细心的你告诉我哦. 本章注解: 暂无 本章释疑: 暂无,等待你的提问 致谢: MVP 林德熙 MVP 吕毅 sPhinX 相关链接 试读记录
- 第十三届蓝桥杯大赛软件赛省赛【Java 大学B 组】试题A: 星期计算
1 public class Test { 2 public static void main(String args[]) { 3 double res=20.0; 4 for(int i=0 ;i ...