vue简单实现购物车

<template><div><!-- 购物车 --><table><thead><tr><!-- 把计算属性的值 绑定给全选按钮 --><!-- v-model 绑定的是data中的属性 --><!-- isCheckAll: 计算属性, 实际是个函数,不能用v-model --><!-- 勾选框的值被点击后, 发生变化, 触发 change 事件 --><td><input@change="chaChanged"type="checkbox":checked="isCheckAll"/>全选</td><td>图片</td><td>名称</td><td>价格</td><td>数量</td><td>小计</td></tr></thead><tbody><tr v-for="(p, i) in products" :key="i"><td><input type="checkbox" v-model="p.checked" /><span>{{ p.checked }}</span></td><td><img :src="p.img" alt="" /></td><td>{{ p.name }}</td><td>¥{{ p.price }}</td><td><!-- disabled 表单元素的属性, 不可用, 不能交互 --><!-- true生效  false不生效 --><button @click="p.count--" :disabled="p.count == 1">-</button><span>{{ p.count }}</span><button @click="p.count++">+</button></td><td>¥{{ p.price * p.count }}</td></tr></tbody><tfoot><tr><!-- methods中的方法, 使用时需要() --><td colspan="6" align="right">合计: {{ total() }}</td></tr><tr><!-- computed中的方法, 使用时不需要() --><td colspan="6" align="right">合计: {{ total2 }}</td></tr></tfoot></table></div>
</template><script>
export default {data() {return {// 名字,价格,数量,是否勾选,图片products: [{img: require('./assets/heros/Annie.jpg'),name: '哥特萝莉',price: 79,count: 1,checked: false,},{img: require('./assets/heros/Galio.jpg'),name: '幽蓝梦魇 加里奥',price: 100,count: 1,checked: false,},{img: require('./assets/heros/Gwen.jpg'),name: '咖啡甜心 格温',price: 110,count: 1,checked: false,},{img: require('./assets/heros/LeeSin.jpg'),name: '龙的传人 李青',price: 1200,count: 1,checked: false,},],}},methods: {// 全选按钮的 状态变化 事件: change// 事件触发的, 一定要放在methods里chaChanged(e) {// 此方法是 勾选框 勾选操作触发的, 如何得到勾选框的 勾选状态?// 事件参数console.log(e.target.checked) //到后台找 checked 属性在哪// 数据中每个商品的 checked 属性, 都应该和全选一样this.products.forEach(p => (p.checked = e.target.checked))},total() {// 遍历商品, 计算所有商品价格的总和var sum = 0// forEach: 在JS高级 数组高阶函数中讲解的this.products.forEach(p => (sum += p.price * p.count))return sum},},// 配置项:computed 称为计算属性// 作用: 存放在这里的函数, 使用时不用(), 会自动触发. 适合没有参数的函数computed: {// 不带参数的, 判断每一个都是勾选isCheckAll() {// 每一个元素, 都使用箭头函数判断, 返回真还是假return this.products.every(p => p.checked)},total2() {var sum = 0// 只累加 勾选状态是 true 的元素// 在乘法里, *true 转 *1    *false 转*0this.products.forEach(p => {sum += p.price * p.count * p.checked})return sum},},
}
</script><style lang="scss" scoped>
table {// 边框合并border-collapse: collapse;thead {background-color: #eee;}td {border: 1px solid gray;padding: 5px 15px;img {width: 100px;}}
}
</style>

购物车流程

制作假数据, 在 data 中 products, 保存了所有商品
每个商品包含信息: 名字, 价格, 图片, 数量, 是否勾选
数据的展示
- 在HTML中, 使用 table 完成头部栏的制作, 然后添加css样式
- 完成body的制作, 使用 v-for 把实际数据填充到表格里
- 完成脚部的制作, tfoot
完成 + 和 - 的制作, 小计功能的实现
- 利用 disabled 属性, 解决 -1 最小为1 的问题
合计的制作
- 先: 在methods中制作total方法, 计算总和. 使用时需要()来触发
- 后: 计算属性的引入, 在 computed 中制作方法, 使用时不需要()
单选的制作
- 引入v-model概念, 双向绑定: 可以在用户操作勾选时, 影响相关的数据, 就是商品的 checked 属性
- 重新制作合计功能, 添加 *p.checked , 只计算勾选为真的商品总和
全选按钮的状态和单选操作联动
- 利用数组高阶函数 every 来判断是否每个商品都是勾选的
- 最终结果绑定给全选按钮的 checked 属性
- 考虑方法不需要参数, 所以在计算属性中书写 isCheckAll
全选按钮的事件: change
- 当全选按钮被点击后, 变更状态, 利用 事件参数 来读取元素的勾选状态值, 然后设置给每个商品的checked属性. 让他们联动

vue简单实现购物车相关推荐

vue 简单的购物车页面案例
1.效果 2.实现的功能 (1)点击全选购物车所有的商品均被选中,并计算出总金额 (2)取消全选,金额为 0. (3)增加购物车页面商品的数量,总金额也跟随变化. (4)购物车商品限购 (5)删除商品 ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
spring和mybatis结合做简单的增删查改系统_springbootamp;amp;vue简单的景点信息管理系统...
springboot&&vue简单的景点信息管理系统这两天闲着没有什么事,就根据陈哥的教程,试着写了一个springboot和vue的简单的景点信息管理系统.也就大致实现了最基本的增 ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
python购物车代码_python简单商城购物车实例代码
本文为大家分享一个简单商城购物车的python代码,供大家参考,具体内容如下要求: 1.写一段商城程购物车序的代码 2.用列表把商城的商品清单存储下来,存到列表 shopping_mail 3.购物 ...
vue简单的数字滚动动画
vue简单的数字滚动,使用transform:translateY()来实现滚动,简陋且粗暴效果代码 <div><div class="record"> ...

vue简单实现购物车

购物车流程

vue简单实现购物车相关推荐

最新文章

热门文章