vue实现购物车简单的功能-单选全选总价计算、批量删除

最新推荐文章于 2024-07-16 16:33:57 发布
最新推荐文章于 2024-07-16 16:33:57 发布
阅读量6.7k 收藏 50
点赞数 7
分类专栏： vue 文章标签： vue 购物车 单选全选 批量删除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Baoge/article/details/87100427
版权
这篇博客主要介绍了如何使用Vue实现购物车功能，包括单选、全选操作，以及总价计算和批量删除商品。作者作为前端新手，根据后盾人的视频教程进行研究并分享了实现过程，期待读者提供优化建议。
摘要由CSDN通过智能技术生成

vue实现购物车简单的功能-----单选全选总价计算、批量删除等
观看了后盾人视频教学，视频里面对于全选和单选的功能没有讲全，于是自己研究了一下，前端小白,也是第一次写博客，有什么不足和可以优化的地方欢迎大佬指导一下！
效果截图：
在这里插入图片描述以下附上全部的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./vue.js"></script>
    <title>Title</title>
</head>
<script>
    window.onload = function () {
        new Vue({
            el: "#app",
            data: {
                //商品数据
                goods: [
                    {id: 1, name: '【详情页领券！到手价2099元起】Xiaomi/小米小米8年度旗舰全面屏骁', price: 2299.00, num: 1},
                    {id: 2, name: '【4+64G低至1299】Xiaomi/小米 小米8 青春版全面屏智能拍照游戏手机', price: 1299.00, num: 1},
                    {id: 3, name: '【爆款钜惠】Xiaomi/小米 6X智能AI双摄拍照学生老人青春手机小米8官方', price: 1299.00, num: 1},
                    {id: 4, name: '领券128G低至2429起/送手环现货Xiaomi/小米 小米8 手机正品官方旗舰', price: 2159.00, num: 1},
                    {id: 5, name: '【直降150领券再减50】Huawei/华为 畅享 8e 青春版 4G高清全面屏大屏全', price: 649.00, num: 1},
                    {id: 6, name: 'Huawei/华为 nova 4 自拍极点全面屏超广角三摄正品智能易烊千玺代言手', price: 3099.00, num: 1},
                    {id: 7, name: '【12期分期/顺丰速发/送壕礼】Huawei/华为 Mate 20 Pro中移动手机', price: 5399.00, num: 1},
                    {id: 8, name: '直降700当天发Huawei/华为 Mate 20 Pro保时捷手机降价mate20proX', price: 3488.00, num: 1},
                    {id: 9, name: 'Huawei/华为 P20 Pro全网通128g徕卡三摄全面屏6G运存手机正品64g', price: 2698.00, num: 1},
                    {id: 10, name: 'Huawei/华为 Mate 20 Pro翡冷翠璨星蓝mate20proUD手机馥蕾红现货', price: 5488.00, num: 1},
                    {id: 11, name: '【6期免息 赠一年碎屏险 】OPPO R17全面屏拍照手机AI智能屏幕指纹', price: 2799.00, num: 1}
                ],
                //控制全选
                allChecked:
最低0.47元/天 解锁文章
Mr_Baoge
关注
  • 7
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue单选全选
bugBuilder
07-31 418
单选全选 一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了element-ui中的 **el-checkbox** 标签,网址如下 https://element.eleme.cn/#/zh-CN/component/checkbox,使用其中的框状态改变的事件,代码如下 <template> <div> <P><el-checkbox v-mo
vue实现购物车的全选功能
weixin_41460722的博客
11-11 2403
首先捋一下逻辑思路 判断显示的状态：判断是否有一个不选中，有一个不选中的话全选按钮就不能显示 点击全选按钮：如果原来都选中，点击一次，全部不选中，如果原来都不选中，点击一次全部选中 封装一个全选的组件，传出一个isChecked的值，把这个组件引入购物车底部组件（下面那栏） isChecked:{ type:Boolean, default:false } 在购物车的全选按钮上动态绑定ischecked，在购物车底部中使用:is-checked=“isS.
vue学习笔记（购物车小案例）
最新发布
cnzzs的博客
07-16 975
用一个简单的购物车demo来回顾一下其中需要注意的细节。先看一下最终效果功能：(1)全选按钮和下面的商品项的选中状态同步，当下面的商品全部选中时，全选勾选，反之，则不勾选。(2)控制购物车商品数量，最低为1(3)拥有小计和总计功能。其中，总计为勾选的商品所需要的总金额。首先，先把静态页面写出来。登录后复制 <tem...
vue 实现购物车总价计算
10-16
今天小编就为大家分享一篇vue 实现购物车总价计算，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue简单购物车功能 computed
lzfengquan的博客
02-17 547
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>购车商品总价计算</title> </head> <body>
vue小案例 购物车 计算本
致我逝去的青春的博客
03-05 250
购物车 数据 [ { "isSelected": false, "productName": "深入浅出xx", "productInfo": "颜色：xx学习", "productPrice": 57.8, "productCount": 3 }, { "isSelected": true, "productName": "深入...
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1....在实际应用中，除了全选与反选之外，还可以进一步扩展更多功能，例如批量删除、价格计算、库存检查等，为用户带来更流畅的购物体验。
uniapp购物车多商家商品实现vue3-setup（删除-添加-结算-总价计算-总数合计-单选全选-快速清理-）
weixin_69658614的博客
08-26 770
【代码】uniapp购物车多商家商品实现vue3-setup（删除-添加-结算-总价计算-总数合计-单选全选-快速清理-）
vue组件单选和全选。
xiao白的博客
01-15 967
我这是一个关注的页面，功能是单选和全选，然后去各自的取消。我用的不是input框，用的是阿里的icon图标。先开始把图标隐藏，然后点击的时候再出现，再次点击就消失。 &lt;template&gt;     &lt;div class="content"&gt;         &lt;div class="guan"&gt;&lt;span&gt;关注你感兴趣的人&lt;/span&g
Vue.js实现购物车checkbox的全选与反选
04-13
购物车的基本操作，推荐全选与反选代码片段，简单易懂，没上传node_modules依赖，下载后自行install
vuejs手把手教你写一个完整的购物车实例代码
10-19
主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue购物车功能计算总价/全选/删除
xuexiaiwo11的博客
06-10 4153
设置4行数据显示在页面上 点击删除可以删除当前行 点击全选可以全选（不用和删除其他功能有关系），输入购买数量，总金额会改变
VUE 单选，多选，全选
weixin_53386810的博客
07-06 514
单选 <template> <div id="messageremind" style="margin: 10%"> <div v-for="(item, index) in list" :key="index"> {{ item.text }} <img :src=" flag == index ? require('../../assets/workOrder/k
vue简单购物车结算计算总价
努力变好
10-30 6568
1、这个购物车主要用到了computed计算 2、效果图： 删除后： 3、功能说明： 点击“+”，“-”可实现数量的加减，总价格和件数也会随之改变 单击移除按钮，删除这个商品，价格和件数随之更改 4、代码（vue.js目录记得修改） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车结算</title> <script
vue.js实战实现购物车的单选全选--第五章购物车练习(一)
Clara_G的博客
05-05 3863
本例介绍《vue.js实战》第五章最后的购物车练习一, 练习1:在当前示例基础上扩展商品列表,新增一项是否选中该商品的功能,总价变为只选中商品的总价,同时提供一个全选按钮 截图如下: html: <div id="app" v-cloak> <template v-if="list.length"> <table> ...
Vue 在购物车场景下的应用
小陈技术空间
01-16 1925
购物车场景需求： 商品、店铺、购物车的选择 商品删除 测试数据 var _list = [{ checked: false, goods: [{ name: "商品1", price: 23, checked: false }] }, { checked: false, goods: [{ ...
购物车+全选+计算总价+加减按钮
weixin_43971385的博客
03-04 1095
RetrofitUtils public class RetrofitUtils { private MyService myService; private RetrofitUtils(){ HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor(); interceptor.setLevel(HttpLo...
Uniapp小程序用Vue 2语法写出购物车单选全选
05-24
可以参考以下代码实现购物车单选全选功能： ``` <template> <div> <div v-for="(item, index) in cartList" :key="index"> <label> <input type="checkbox" v-model="item.checked" @change="handleCheckboxChange"> {{ item.name }} </label> <span>{{ item.price }}</span> </div> <div> <label> <input type="checkbox" v-model="isAllChecked" @change="handleAllCheckboxChange"> 全选 </label> <span>{{ totalPrice }}</span> </div> </div> </template> <script> export default { data() { return { cartList: [ { name: '商品1', price: 10, checked: false }, { name: '商品2', price: 20, checked: false }, { name: '商品3', price: 30, checked: false } ] } }, computed: { isAllChecked() { return this.cartList.every(item => item.checked) }, totalPrice() { return this.cartList.filter(item => item.checked).reduce((total, item) => total + item.price, 0) } }, methods: { handleCheckboxChange() { this.$nextTick(() => { this.isAllChecked = this.cartList.every(item => item.checked) }) }, handleAllCheckboxChange() { this.cartList.forEach(item => { item.checked = this.isAllChecked }) } } } </script> ``` 在上面的代码中，我们首先定义了一个 `cartList` 数组来存储购物车中的商品信息，每个商品包括名称、价格和是否选中三个属性。接着，我们通过 `v-for` 指令遍历 `cartList` 数组，动态生成购物车列表。 在购物车列表中，我们使用了一个复选框来表示每个商品的选中状态，使用了 `v-model` 指令来双向绑定商品的 `checked` 属性。当用户点击某个商品的复选框时，我们通过 `@change` 监听其变化，并在 `handleCheckboxChange` 方法中更新全选复选框的选中状态。 在最后一行，我们使用了一个全选复选框来表示购物车中所有商品的选中状态。与单个商品的复选框类似，我们使用了 `v-model` 指令来双向绑定全选复选框的 `isAllChecked` 属性。当用户点击全选复选框时，我们通过 `@change` 监听其变化，并在 `handleAllCheckboxChange` 方法中更新所有商品的选中状态。同时，我们还使用了计算属性来计算购物车中所有选中商品的总价。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值