vue项目中购物车的全选，反选，单选，删除，计算总价钱

最新推荐文章于 2024-01-29 10:04:50 发布
最新推荐文章于 2024-01-29 10:04:50 发布
阅读量2k 收藏 10
点赞数 2
分类专栏： vue 文章标签： vue 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zb981027/article/details/103372508
版权

购物车的全选，单选，删除，计算总价钱

在这里插入图片描述

获取数据

在这里插入图片描述
在这里插入图片描述
使用axios方法请求后台获取数据，然后把获取到的数据渲染到页面上

单选，计算价钱

在这里插入图片描述
在这里插入图片描述
点击单个商品卡片的时候传这个当前商品的信息，然后在事件中检查当前信息中存在不存在选中的属性(check == true)如果不存在则给这个信息中添加这一属性(this.$set(item,“check”,true))，然后定义的被选中的商品数量(allCount)进行加一，如果该商品存在这一属性则状态取反(item.checked = !item.checked)
在这里插入图片描述
计算总价钱是封装两个函数需要传递商品的参数，一个是计算总价钱需要传参商品的参数进行加减将总价钱return出来，另一个参数是将当前被选中的商品的租金，押金，商品数量，商品租期传到计算总价钱的函数中

全选

在这里插入图片描述
在这里插入图片描述
点击全选的时候传一个falg然后在设定checkAllFlag为flag，再遍历循环购物车列表，如果商品信息中不存这个checked，就要给每一项商品中都要加上这个属性，属性值为checkAllFlag，如果存在就让每一项checked的属性值为checkAllFlag，最后调用计算总价钱

删除

在这里插入图片描述
删除单个商品卡片就正常调用接口传该商品的id就ok

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
全选删除首先是全选所有商品，然后将所有的商品进行遍历把所有的id值push到一个数组，然后调用删除购物车的接口把这个数组传过去。

这就是购物车的一套全选，单选，计算总价钱，删除的逻辑

！如果觉得本篇文章对您有用，就留一个关注吧

zb981027
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js实现购物车checkbox的全选与反选
04-13
购物车的基本操作，推荐全选与反选代码片段，简单易懂，没上传node_modules依赖，下载后自行install
Vue购物车全选、反选——单选全部选中、全选自动选中以及总价
A_gyb的博客
09-10 2823
1.模拟购物车数据 data() { return { //模拟购物车数据arr arr:[ { ischeck:false, //默认为false name:'篮球', price:98 }, { ischeck:false, //默认为false name:'足球', price:10
Vue 实现复选框全选，反选，单选，多选(简易版)
最新发布
weixin_44021888的博客
01-29 511
Vue 实现复选框全选，反选，单选，多选(简易版)
apicloud中vue处理购物车全选单选
01-15
使用vue在apicloud实现 购物车的全选单选 只要是拿一个字段作区分 那他去作区分 最麻烦的就是ios不能全选 但是我是经过api.systemType 做过处理 ios和安卓的区分 <input class="aui-radio" v-model="vo.is_select" v-if="api.systemType=='ios'" @touchstart.prevent="update_cart_selectss(index)" type="checkbox"> <input class="aui-radio" :checked="vo.is_select" v-else @click.stop="update_cart_selects(index)" type="checkbox"> ios下多个settimeout延迟加载 记住这一点
Vue实现购物车(全选,单选,计算总价,计算单价,计算总数量)
weixin_60523038的博客
06-30 4496
vue实现购物车的所有功能
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
主要介绍了Vue实现购物车的全选、单选、显示商品价格实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现购物车结算功能
10-15
主要介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js实现简单购物车功能
11-20
加函数，减函数，手动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，一共分为6个事件 具体效果如下图 代码在这里 main.js 'use strict' var app = new Vue({ el: '#app', data: { list: [ { ...
Vue购物车案例（全选，反选，加入，删除，加减，总价，数量）
qq_51501183的博客
09-22 9754
1.购物车效果图 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ font-size: 16px; } table { width: 1200px; } ul l....
vue实现购物车（多选、单选、全选）
m0_59224033的博客
09-05 4666
vue实现购物车功能，不依赖任何第三方组件、插件，复制粘贴开箱即用，简简单单，干净卫生，欢迎C+V
vue实现购物车选择功能
10-15
主要为大家详细介绍了vue实现购物车选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中实现商品购物车全选反选
qq_44242030的博客
03-31 1559
项目需求： 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框，不勾选全选框 选中所有商品则勾选所有商家全选框和全选框 我的思路： 1、通过对数据的简单操作可实现更深层次的全选操作 2、vue.$set(object, key, value)给对象添加属性可以更新视图 3、...
Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
主要发布一些日常学习代码及理解
10-26 793
详细介绍了Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
购物车的简单功能vue实列实现单选多选
xiaoquan1997的博客
06-22 646
用vue实列来实现购物车的单选多选功能，使用了v-for v- model 使用@change来代替了@click我们要知道怎么实现这个需求具体要怎么实现呢？ 点击每一个单选的情况，就判断arr和list的长度， 如果相等就说明全部选中了，就要把全选框勾上 如果不相等就要把全选框 取消勾选话不多说代码如下：这是页面的代码：...
【Vue-cli】组件化实现购物车，包括单选按钮全选按钮联动
qq_37086980的博客
01-25 892
代码实例 App.vue <template> <div id="app"> <index></index> </div> </template> <script> // 引入主页index import Index from './pages/Index'; export default { name: 'App', components: { Index } }; </s.
vue实现购物车页面功能交互，单选、全选、左滑删除
cd13849109771的博客
10-27 2365
vue实现购物车页面功能交互，单选、全选、左滑删除
vue.js实现二级购物车的单选全选案例
kuBi_MaNong的博客
07-04 477
实现购物车中带有分类或者店铺名的全选和反选 , 主要用到了watch监听 案例效果截图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&
vue接入支付宝支付
zb981027的博客
01-06 3482
vue接入支付宝支付 前端调取后端给的接口所需要的传的参数是（支付类型，订单编号，价格，openid），接口调取成功后会返回一个form表单，然后前端处理这个form表单就ok了 ...
vue复选框全选反选单选
05-20
在 Vue 中，可以通过 v-model 指令绑定复选框的选中状态。实现全选、反选、单选功能可以通过以下方式： 1. 全选：绑定一个全选的复选框，并将其选中状态绑定到一个 Boolean 类型的变量上，然后将所有子复选框的选中状态绑定到这个变量上。当全选复选框的选中状态改变时，通过 v-model 指令将变量的值同步到所有子复选框的选中状态，实现全选功能。 ```html <template> <div> <input type="checkbox" v-model="allSelected"> 全选 <div v-for="(item, index) in items" :key="index"> <input type="checkbox" :value="item" v-model="selectedItems"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'], selectedItems: [], allSelected: false } }, watch: { allSelected(val) { this.selectedItems = val ? this.items : [] } } } </script> ``` 2. 反选：绑定一个反选的按钮，并在点击时通过计算属性将所有子复选框的选中状态取反。 ```html <template> <div> <button @click="toggleSelection">反选</button> <div v-for="(item, index) in items" :key="index"> <input type="checkbox" :value="item" v-model="selectedItems"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'], selectedItems: [] } }, computed: { allSelected: { get() { return this.selectedItems.length === this.items.length }, set(val) { this.selectedItems = val ? this.items : [] } } }, methods: { toggleSelection() { this.selectedItems = this.items.filter(item => !this.selectedItems.includes(item)) } } } </script> ``` 3. 单选：绑定一个单选的复选框，将其选中状态绑定到一个 String 类型的变量上，然后将所有子复选框的选中状态绑定到这个变量上。当子复选框的选中状态改变时，通过 v-model 指令将变量的值同步到单选的复选框的选中状态，实现单选功能。 ```html <template> <div> <input type="checkbox" :value="null" v-model="selectedItem"> 无 <div v-for="(item, index) in items" :key="index"> <input type="checkbox" :value="item" v-model="selectedItem"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'], selectedItem: null } }, computed: { allSelected: { get() { return this.selectedItems.length === this.items.length }, set(val) { this.selectedItems = val ? this.items : [] } } }, watch: { selectedItem(val) { this.selectedItems = val ? [val] : [] } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值