vue实现购物车

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

页面代码如下：

<body>
<div id="app">
    <div class="wrap">
        <div v-for="(item,index) in list"  class="commodity clearfix" :key="item.id">
            <div class="checkBox fl">
                <input class="check" type="checkbox" v-model="item.isChecked" @change="clickOnce"/>
            </div>
            <div class="pic fl">
                <img :src="item.thumbnail" alt="#"/>
            </div>
            <div class="txt fl">
                <h3>{{item.name}}</h3>
                <p>规格：50g</p>
                <p>￥<span>{{item.reduct_price}}</span></p>
            </div>
            <div class="num">
                <button  @click="minusNum(index)">-</button>
                <input ref="refNum" type="text" v-model.number="item.num" @keydown="changeNum(index)"/>
                <button @click="addNum(index)">+</button>
            </div>
        </div>


        <div class="footer clearfix">
            <div class="allCheckBox fl">
                <input class="allCheck" type="checkbox" v-model="allChecked" @change="clickAll"/>
                <span>全选</span>
            </div>
            <a class="btn fr" href="#">去结算(<span>{{sum.sumNum}}</span>件)</a>
            <div class="agg fl">
                <div class="allPrice">
                    总计:<span id="price">{{sum.sumAll}}</span>
                </div>
                <div class="discounts">
                    不含运费，已优惠 <span>￥{{sum.sumDiscounts}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

实现方法如下：

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            allChecked:false,//代表全选按钮的值
            success:true,
            code:200,
            msg:"获取购物车数据成功",
            list:[{
                "id": "00001",
                "name": "施华蔻伊采染发膏60ml",
                "brand": "施华蔻",
                "original_price": "100",
                "inventory": "1062",
                "thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg",
                "product_id": "00021",
                "time_start": "2018-12-17 06:00:00",
                "time_end": "2018-12-17 07:00:00",
                "total": "727",
                "reduct_price": "69",
                "stock": "113",
                "num":3,
                'isChecked':false
            }, {
                "id": "00002",
                "name": "施华蔻伊采染发膏100ml",
                "brand": "施华蔻",
                "original_price": "264",
                "inventory": "2615",
                "thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products (2).jpg",
                "product_id": "00022",
                "time_start": "2018-12-17 21:00:00",
                "time_end": "2018-12-17 23:00:00",
                "total": "559",
                "reduct_price": "241",
                "stock": "320",
                "num":2,
                'isChecked':false

            }, {
                "id": "00003",
                "name": "施华蔻伊采染发膏200ml",
                "brand": "施华蔻",
                "original_price": "97",
                "inventory": "3001",
                "thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products (3).jpg",
                "product_id": "00023",
                "time_start": "2018-12-17 07:00:00",
                "time_end": "2018-12-17 08:00:00",
                "total": "2393",
                "reduct_price": "35",
                "stock": "1054",
                "num":2,
                'isChecked':false
            }]
        },
        methods:{
            clickOnce:function () {
                var allChecked = true;
                for(var i=0;i<this.list.length;i++){
//                只要有一个没选中就为false
                    if(!this.list[i].isChecked){
                        allChecked = false;
                        break;
                    }
                }
                this.allChecked = allChecked;

            },
            clickAll:function () {
                console.log(1);
                for(var i=0;i<this.list.length;i++){
//                只要有一个没选中就为false
                    this.list[i].isChecked = this.allChecked;
                }
            },
//            加
            addNum:function (i) {
                this.list[i].num++;
            },
//            手动输入框
            changeNum:function (i) {
                var num = this.list[i].num;
                console.log(isNaN(Number(num)));
                if(isNaN(Number(num))){
                        num = 0;
                }else{
//                    console.log(num.trim().length);
                    num = String(num);
                    if(num.trim().length==0){
                        num = 0;
                    }
                }
                this.list[i].num = parseInt(num);
            },
//            减
            minusNum:function (i) {
                this.list[i].num--;
                this.list[i].num = this.list[i].num<0?0:this.list[i].num;
            }
        },
        computed:{
            sum:function () {
//               总价
                var sumAll = 0;
//                总件数
                var sumNum = 0;
//                总优惠
                var sumDiscounts = 0;
                for(var i=0;i<this.list.length;i++){
                    if(this.list[i].isChecked){
                        sumAll += this.list[i].num*this.list[i].reduct_price;
                        sumNum += this.list[i].num;
                        sumDiscounts += (this.list[i].original_price-this.list[i].reduct_price)*this.list[i].num;
                    }
                }
                console.log(sumNum);
                var obj = {
                    sumAll:sumAll,
                    sumNum:sumNum,
                    sumDiscounts:sumDiscounts
                };
                return obj;
            }
        }
    })
    
</script>
Ekko__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现购物车
牛晓林的博客
12-12 329
这个是效果图（丑就丑点吧，功能实现就行）： 选中的商品，计算对应的总价 全选与反选，总价对应变化 步进器，选中的商品的数量加减的同时，总价也相应变化 移除，对应总价变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo...
Vue实现购物车功能
12-29
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <link rel=stylesheet href=... <tr>
【Vue】购物车 - 静态布局
最新发布
qq_39921135的博客
06-13 211
所以为了便于维护，一般都会将购物车的数据基于 vuex 分模块管理。说明：购物车 数据联动关系 较多，且通常会封装一些 小组件，
vue 实现购物车
zhaohanqq的博客
12-16 247
&lt;template&gt; &lt;div&gt; &lt;div class="shopcart"&gt; &lt;div class="content"&gt; &lt;div class="content-left" @click="toggleShow"&gt; &l
Vue购物车数量加减
uyiub的博客
01-10 1073
代码： 数量为减到一时，再点击恒为一
前端Vue实现购物车案例
04-08
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤： 1、下载资源，使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
vue实现购物车列表
10-15
在本示例中，我们看到一个使用Vue.js框架...以上就是这个Vue实现购物车列表的主要技术细节。通过这个实例，我们可以看到Vue.js如何结合组件化、数据绑定、事件处理和计算属性等特性，构建出功能丰富的交互式前端应用。
vue实现购物车的监听
10-15
主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车小案例
12-13
在这个购物车小案例中，Vue 被用来管理状态并驱动页面交互。下面将详细解释这个案例中的关键知识点： 1. **Vue 实例**： - 在 HTML 中，`<div class="content1" id="content1">` 是 Vue 实例的挂载点，Vue 将在这...
vue实现购物车系统
06-04
vue实现购物车单页面应用，实现了vue基础的功能开发，适合入门学习
vue实现购物车功能
桃之夭夭的博客
03-10 593
【代码】vue实现购物车功能。
用vue实现购物车管理
07-08
在 Vue 中实现购物车管理可以通过以下步骤进行： 1. 创建一个 Vue 实例，并定义一个数据属性 `cart` 来存储购物车中的商品列表，以及其他需要的属性。 ```javascript new Vue({ el: '#app', data: { cart: [] // 购物车商品列表 // 其他属性 }, methods: { // 方法 } }); ``` 2. 在模板中显示购物车内容，并提供添加和删除商品的功能。 ```html <div id="app"> <h1>购物车</h1> <ul> <li v-for="item in cart" :key="item.id"> {{ item.name }} - ￥{{ item.price }} <button @click="removeFromCart(item.id)">删除</button> </li> </ul> </div> ``` 3. 在 Vue 实例的 `methods` 对象中定义添加商品和删除商品的方法。 ```javascript methods: { addToCart(item) { this.cart.push(item); }, removeFromCart(itemId) { this.cart = this.cart.filter(item => item.id !== itemId); } } ``` 4. 在需要的地方调用添加和删除商品的方法。 ```html <button @click="addToCart({ id: 1, name: '商品1', price: 100 })">添加到购物车</button> ``` 这样，你就可以使用 Vue 实现基本的购物车管理了。当点击添加到购物车按钮时，商品会被添加到购物车列表中，并在模板中显示出来。当点击删除按钮时，相应的商品会从购物车列表中移除。你可以根据具体需求扩展和改进这个购物车管理系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值