Vue2 实现购物车功能（可直接使用）

叁歲伎倆 2023-10-14 17:46 25阅读 0赞

#### 目录 ####

*   *   *  vue2.0实例简单购物车
         *  代码实现

#### vue2.0实例简单购物车 ####

页面展示效果如下：

![在这里插入图片描述][532c2c5262d7464caff0754c95fc1eaa.png]  
该购物车实现了自动计算小计、总价。

#### 代码实现 ####

<body>
        <div id="app">
            <div>
                <form action="">
                    商品名称:<input type="text" v-model="productName" name="productName">
                    商品单价:<input type="text" v-model="productPrice" name="productPrice">
                    <input type="button" value="添加商品" @click="addProduct">
                </form>
            </div>
            <ul>
                <li v-for="(pro,index) in productList"  :key="index">
                    商品名称: {
       {pro.productName}} ---------------- 商品单价: {
       {pro.productPrice}} 
                    <button @click="addproToCart(index)">添加商品</button>
                </li>
            </ul>
            <cart :cartlist="cartList"></cart>
        </div>
    
        <template id="cartHtml">
            <div>
                <table border="1">
                    <tr>
                        <td>商品</td>
                        <td>商品名称</td>
                        <td>商品价格</td>
                        <td>商品数量</td>
                        <td>商品价格</td>
                    </tr>
                    <tr v-for="(pro,index) in cartlist" :key="index">
                        <td><input type="checkbox" v-model="pro.active"></td>
                        <td>{
       {pro.productName}}</td>
                        <td>{
       {pro.productPrice}}</td>
                        <td>
                            <button @click="reduceProNum(index)">-</button>
                            {
       {pro.productNum}}
                            <button @click="addProNum(index)">+</button>
                        </td>
                        <td>{
       {pro.productPrice * pro.productNum}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">选中的商品:{
       {activeNum}}/{
       {cartlist.length}}</td>
                        <td colspan="2">商品总价:{
       {totalprice}}</td>
                    </tr>
                </table>
            </div>
        </template>    
    </body>

**js代码**

var cart = {
        
            template:'#cartHtml',
            props:['cartlist'],
            methods:{
        
                // 商品数量+1
                addProNum(index){
        
                    let product = this.cartlist[index];
                    product.productNum++
                },
                // 商品数量-1
                reduceProNum(index){
        
                    let product = this.cartlist[index];
                    // 判断商品数量是否为1
                    if(product.productNum==1){
        
                        this.cartlist.splice(index,1) // 为1，从数组中删除
                    }else{
        
                        product.productNum--
                    }
                }
            },
            computed:{
        
                activeNum(){
        
                    let activeProdctList = this.cartlist.filter(item=>{
        
                        return item.active
                    })
                    return activeProdctList.length
                },
                totalprice(){
        
                    let result = 0;
                    for(pro of this.cartlist){
        
                        if(pro.active){
        
                            result = result + pro.productPrice * pro.productNum
                        }
                    }
                    return result;
                }
            }
        }
    
        var app = new Vue({
        
            el:'#app',
            data(){
        
                return{
        
                    productName:'',
                    productPrice:0,
                    productList:[],
                    cartList:[]
                }
            },
            methods:{
        
                addProduct(){
        
                    // todo 对新增的商品名称和单价，进行验证
    
                    // 查找新增的商品是否存在于商品列表中，如果不在存在返回-1
                    let findindex = this.productList.findIndex(item=>{
        
                        return item.productName==this.productName
                    })
                    if(findindex==-1){
         // 判断商品列表中是否存在新增商品
                        // 把新商品添加到商品列表中
                        this.productList.push({
        productName:this.productName,productPrice:this.productPrice})
                    }else{
        
                        alert('此商品已经存在') // 商品已存在，给出提示
                    }
                },
                // 添加商品到购物车，index是单击商品的下标
                addproToCart(index){
        
                    
                    let newproduct = this.productList[index]; // 根据下标从商品列表中取出商品对象
                    // 从购物车列表中查找，是否存在新的商品，如果查到返回购物车中的商品
                    let product = this.cartList.find(item=>{
        
                        return item.productName==newproduct.productName
                    })
                    if(product){
        
                        // 如果有对应商品数量加1
                        product.productNum++
                    }else{
        
                        // 没有对应商品，添加新的商品到购物车
                        this.cartList.push({
        
                            productName:newproduct.productName,
                            productPrice:newproduct.productPrice,
                            productNum:1,
                            active:true
                        });
                    }
                    
                    console.log(product);
                }
            },
            components:{
        
                cart
            }
        })

**欢迎大家有问题指出**

[532c2c5262d7464caff0754c95fc1eaa.png]: https://img-blog.csdnimg.cn/532c2c5262d7464caff0754c95fc1eaa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue2 实现购物车功能（可直接使用）

目录 vue2.0实例简单购物车代码实现 vue2.0实例简单购物车页面展示效果如下： ![在这里插入图片描述][5

叁歲伎倆/ 2023年10月14日 17:46/ 0 赞/ 26 阅读

相关 vue实现简单的购物车功能

前言我们在开发商城的过程中，购物车功能是必不可少的一项，比如我们现在比较流行的商城有淘宝，天猫，京东，小米，拼多多，唯品会，当当网等知名商城。那么你是否想过自己开发一

今天药忘吃喽~/ 2023年08月17日 15:39/ 0 赞/ 192 阅读

相关 vue之vuex实现购物车功能

vuex购物车一、为什么用vuex来实现购物车功能二、用到的vuex知识点。三、

怼烎@/ 2023年03月12日 12:21/ 0 赞/ 57 阅读

相关简单学会用Vue实现购物车功能

首先，还是先把布局写好，和引入vue、bootstrap和准备vue实例，这个不多说，代码如下 <script src="./js/jquery-3.5.1.min.

超、凢脫俗/ 2022年10月16日 07:45/ 0 赞/ 251 阅读

相关购物车功能实现

购物车功能的实现：一、创建购物车类：框架： 1. 购物车可以有很多不同种类的商品，可以将购物车传入泛型； 2. 定义一个Map类型 Map<T,Integer>

Dear 丶/ 2022年07月05日 15:07/ 0 赞/ 363 阅读

相关 vue+node 购物车列表功能实现

二.路由购物车列表页面的路由在src/router/index.js里定义 { path: '/cart', name: 'Cart',

向右看齐/ 2022年05月11日 14:28/ 0 赞/ 426 阅读

相关 vue 实现购物车

![在这里插入图片描述][20181216124512128.png] <template> <div> <div class="shop

一时失言乱红尘/ 2022年04月04日 09:47/ 0 赞/ 437 阅读

相关 vue.js实现购物车功能2.0版本

在上一个程序中，我只是简单的实现了商品增减时自动计算总金额，在这次的案列中，我增加了全选、反选的功能。新增了一项是否选中该商品的功能，总价变成只计算选中商品的总结，同时提供

朴灿烈づ我的快乐病毒、/ 2021年12月24日 00:07/ 0 赞/ 277 阅读

相关使用vue2.0实现购物车商品结算功能代码

<template> <div class="shop">  <div class="shoping"

我会带着你远行/ 2021年12月17日 01:21/ 0 赞/ 348 阅读

相关使用vue-cli实现购物车和地址选配功能

一项目目录结构 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

深藏阁楼爱情的钟/ 2021年07月24日 18:41/ 0 赞/ 333 阅读