使用vue制作一个简单的购物车

最新推荐文章于 2025-03-11 19:07:39 发布
最新推荐文章于 2025-03-11 19:07:39 发布
阅读量351 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75896691/article/details/137346013
版权

 以下便是html  和  js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 最大的盒子 -->
        <div class="boss">
            <!-- 最上边的盒子 -->
            <div class="gouwuche">
                <div class="fangzi"><img src="家房子建筑.png"></div>
                <div class="a">/</div>
                <div class="gwc">购物车</div>
            </div>
            <table border="1" class="biaodan" cellspacing="0" cellpadding="0" width="100%" height="100px">
                <tr style="background-color: rgba(0, 0, 0, 0.1);height: 60px;">
                    <th>选中</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <!-- 第一行表格 -->
                <tr class="yinyingone" :class="{boxxx:biaoge==true}"  v-show="shanchuone" style="height: 100px; ">
                    <td > <input  v-model="biaoge" style="width: 30px;height: 30px;position: absolute;left: 30px;top: 160px;" type="checkbox"> </td>
                    <td><div class="tupian"><img src="家房子建筑.png"></div></td>
                    <td style="text-align: center;font-size: 30px;">20</td>
                    <td style="font-size: 30px;text-align: center;">
                        <button @click="func()" :disabled="number<=1" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">-</button>
                        {{number}}
                        <button @click="func1()" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">+</button>
                    </td>
                    <td>
                        <!-- 总和 -->
                         <input type="" value="" v-show="yincang"  v-model="zh">
                         <label for="" style="font-size: 30px;text-align: center;">{{sum}}</label>
                    </td>
                    <td><div class="shanchu" @click="shanchu()">删除</div></td>
                </tr>
                 <!-- 第二行表格 -->
                 <tr v-show="shanchutwo" :class="{boxxx:biaoge1==true}"  style="height: 100px;">
                    <td > <input  v-model="biaoge1" style="width: 30px;height: 30px;margin-left: -20px;top: 120px;" type="checkbox"> </td>
                    <td><div class="tupian"><img src="家房子建筑.png"></div></td>
                    <td style="text-align: center;font-size: 30px;">40</td>
                    <td style="font-size: 30px;text-align: center;">
                        <button @click="func2()" :disabled="number1<=1" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">-</button>
                        {{number1}}
                        <button @click="func3()" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">+</button>
                    </td>
                    <td>
                        <input type="" value="" v-show="yincang1"  v-model="zh1">
                        <label for="" style="font-size: 30px;text-align: center;">{{sum1}}</label>
                    </td>
                    <td><div class="shanchu" @click="shanchu1()">删除</div></td>
                </tr>
                 <!-- 第三行表格 -->
                 <tr class="yinyingthree" :class="{boxxx:biaoge2==true}" v-show="shanchuthree" style="height: 100px;">
                    <td > <input  v-model="biaoge2" style="width: 30px;height: 30px;margin-left: -20px;top: 120px;" type="checkbox"> </td>
                    <td><div class="tupian"><img src="家房子建筑.png"></div></td>
                    <td style="text-align: center;font-size: 30px;">3</td>
                    <td style="font-size: 30px;text-align: center;">
                        <button @click="func4()" :disabled="number2<=1" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">-</button>
                        {{number2}}
                        <button @click="func5()" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">+</button>
                    </td>
                    <td>
                        <input type="" value="" v-show="yincang2"  v-model="zh2" >
                        <label for="" style="font-size: 30px;text-align: center;height: 100px;">{{sum2}}</label>
                    </td>
                    <td><div class="shanchu" @click="shanchu2()">删除</div></td>
                </tr>
                 <!-- 第四行表格 -->
                 <tr  class="yinyingfour" :class="{boxxx:biaoge3==true}" style="height: 100px;">
                    <td > <input v-model="biaoge3" style="width: 30px;height: 30px;margin-left: -25px;top: 465px;position: absolute;" type="checkbox"> </td>
                    <td><div class="tupian"><img src="家房子建筑.png"></div></td>
                    <td style="text-align: center;font-size: 30px;">34</td>
                    <td style="font-size: 30px;text-align: center;">
                        <button @click="func6()" :disabled="number3<=1" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">-</button>
                        <span style="text-align: center;">{{number3}}</span>
                        <button @click="func7()" style="width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;">+</button>
                    </td>
                    <td>
                        <input type="" value="" v-show="yincang3" v-model="zh3">
                        <label for="" style="font-size: 30px;text-align: center;text-align: center;">{{sum3}}</label>
                    </td>
                    <td><div class="shanchu" @click="shanchu3()">删除</div></td>
                </tr>
            </table>
            <!-- 第二个盒子 -->
            <div class="twobox">
                <input v-model="quanxuan" @click="quanxuanbiaodan()" style="width: 50px;height: 50px; position: absolute;left: 20px; margin-top: 20px;" type="checkbox">
                <span class="quanxuan">全选</span>
                <button style="width: 200px;height: 50px;margin-left: 300px;margin-top: 20px;text-align: center;font-size: 30px;" @click="quanbuquxiao()">全部取消</button>
                <div class="zongjie">总价：  ￥</div>
                <div class="zonghe">{{numbersum}}</div>
                <div class="jiesuan">结算 ( {{jiesuan1}} )</div>
            </div>
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip=false
    var vm=new Vue({
        el:"#app",
        data(){
            return{
                // 设置第一个表单个数为---7
                number:7,
                // 设置第一个表单个数为---3
                number1:3,
                // 设置第一个表单个数为---10
                number2:10,
                // 设置第一个表单个数为---20
                number3:20,
                biaoge:false,
                biaoge1:false,
                biaoge2:true,
                biaoge3:true,
                quanxuan:false,
                // numbersum:0,
                zh:140,
                zh1:120,
                zh2:30,
                zh3:680,
                // 隐藏表格一
                yincang:false,
                // 隐藏表格二
                yincang1:false,
                // 隐藏表格三
                yincang2:false,
                // 隐藏表格四
                yincang3:false,
                arr:[],
                // 点击删除按钮   删除第一个表格
                shanchuone:true,
                // 点击删除按钮   删除第二个表格
                shanchutwo:true,
                // 点击删除按钮   删除第三个表格
                shanchuthree:true,
                // 点击删除按钮   删除第四个表格
                shanchufour:true,
                // 总结算数量
                jiesuan1:30, 
                arr:[],
            }
        },
        computed:{
            // 第一个表格计算合计功能
            sum(){
                return (this.number)*20
            },
             // 第二个表格计算合计功能
            sum1(){
                return (this.number1)*40
            },
             // 第三个表格计算合计功能
            sum2(){
                return (this.number2)*3
            },
             // 第四个表格计算合计功能
            sum3(){
                return (this.number3)*34
            },
            // 总价求和功能
            numbersum(){
                return this.zh2+this.zh3;
            }
        },
        methods:{
            // 第一个表格减法功能
            func(){
                this.number--
            },
            // 第一个表格加法功能
            func1(){
                this.number++
            },
            // 第二个表格减法功能
             func2(){
                this.number1--
            },
            // 第二个表格加法功能
            func3(){
                this.number1++
            },
             // 第三个表格减法功能
            func4(){
                this.number2--
            },
            // 第三个表格加法功能
            func5(){
                this.number2++
            },
            // 第四个表格减法功能
            func6(){
                this.number3--
            },
            // 第四个表格加法功能
            func7(){
                this.number3++
            },
            // 点击全部选取表单
            quanxuanbiaodan(){
                this.biaoge=true;
                this.biaoge1=true;
                this.biaoge2=true;
                this.biaoge3=true;
            },
            // 点击全部取消表单
            quanbuquxiao(){
                this.biaoge=false;
                this.biaoge1=false;
                this.biaoge2=false;
                this.biaoge3=false;
                this.quanxuan=false
            },
            // 删除表格一
            shanchu(){
                this.shanchuone=false
            },
            // 删除表格二
            shanchu1(){
                this.shanchutwo=false
            },
            // 删除表格三
            shanchu2(){
                this.shanchuthree=false
            },
            // 删除表格四
            shanchu3(){
                this.shanchufour=false
            },
        }
    })
</script>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
.boss{
    width: 100%;
    height: 1000px;
    /* border: 1px solid black; */
    background: linear-gradient(aquamarine,pink);
}
.gouwuche{
    width: 115px;
    height: 30px;
    margin: 20px 20px;
    /* background-color: aqua; */
}
.fangzi{
    width: 30px;
    height: 30px;
    float: left;

}
.fangzi img{
    width: 100%;
    height: 100%;
    background-size: 5px 10px; 
 }  
 .a{
    float: left;
    font-size: 20px;
    line-height: 30px;
    margin-left: 5px;
 }
.gwc{
    font-size: 20px;
    line-height: 30px;
    margin-left: 5px;
}
 .biaodan{ 
    text-align: center;
    margin: 0 auto;
 } 
.tupian{
    width: 150px;
    height: 80px;
    margin: 0 auto;
}
.tupian img{
    width: 100%;
    height: 100%;
}
.shanchu{
    width: 100px;
    height: 50px;
    font-size: 30px;
    color: white;
    background-color: red;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
.shanchu:hover{
    color: aqua;
}
.twobox{
    width: 100%;
    height: 100px;
    /* background-color: pink; */
}
.quanxuan{
    font-size: 30px;
    text-align: center;
    /* line-height: 50px; */
    margin-top: 20px;
    margin-left: 80px;
    position: absolute;
}
.zongjie{
    font-size: 20px;
    /* float: right; */
    margin-left: 1300px;
    margin-top: -30px;
}
.jiesuan{
    width: 150px;
    height: 60px;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    margin-left: 1500px;
    margin-top: -55px;
    background-color: blue;
    cursor: pointer;
}
.zonghe{
    color: #9c27b096;
    font-size: 30px;
    margin-left: 1400px;
    margin-top: -35px;
    font-weight: bold;
}
.boxxx{
    background-color: rgba(0, 0, 0, 0.1) ;
}

 以下便是显示的效果

 

使用vue实现的一个简易的购物车
Mr_ShengYang的博客
02-10 441
功能介绍： 1、加减数量 2、计算总价格 3、移除操作
使用vue制作一个简单的购物车案例
qq_52959651的博客
12-03 918
使用vue制作一个简单的购物车案例 实现简单的购买数量增加，减少，商品价格随数量增加而增加，移除所有的商品数量。 这是效果图 <style type="text/css"> table { border: 1px solid black; } table { width: 100%; } th { height: 50px;
Vue实现购物车功能
08-30
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
vue 简单实现购物车：商品基础信息最终的 html 文件 + 商品计数器的组件处理，实现了购物车；
狮子座的男孩
12-21 5704
vue 简单实现购物车：商品基础信息最终的 html 文件 + 商品计数器的组件处理，实现了购物车;
Vue.js 购物车示例：从零开始构建
最新发布
weixin_66708577的博客
03-11 623
在前端开发中，购物车功能是电商网站的核心组件之一。通过 Vue.js，我们可以快速构建一个交互式的购物车系统。本文将通过一个简单的示例，展示如何使用 Vue.js 实现一个基本的购物车功能。
使用Vue制作简易购物车
weixin_59525879的博客
06-29 921
v-for：类似于js中的for循环，需要使用。
Vue.js之简单购物车实现
爱吃Java的羊的博客
04-27 684
【代码】Vue.js之简单购物车实现。
Vue简易购物车
qq_43090756的博客
05-15 508
Vue.js 简单购物车 序号 商品名称 商品价格 购买数量 操作 {{ iphone.id }} {{ iphone.name }} {{ iphone.price }} - ...
vue.js实现简单购物车功能
11-20
在本示例中，我们将探讨如何使用Vue.js来实现一个简单的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简便。在这个小项目中，我们将实现...
基于vue制作的简单购物车结算功能代码
06-11
在本项目中，我们主要探讨的是如何利用Vue.js框架实现一个基本的购物车结算功能。Vue.js是一款轻量级的前端JavaScript框架，以其组件化、响应式数据绑定和易用性而受到开发者们的广泛欢迎。下面，我们将深入解析这个...
使用vue.js制作简易购物车
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-16 1286
通过单击+或者-来实现商品数量的增加和减少，单击移除会删除对应商品，删除所有商品则提示购物车为空的字样
vue.js写的简单购物车
10-12
vue.js是个很强大的插件，编写出来的购物车也是相当简单，希望能对你有所帮助。
vue项目之购物车
08-08
使用vue构建的项目，主要实现购物车逻辑功能。使用vant 框架配合开发。
Vue简单购物车
Smootht的博客
08-19 1247
Vue简单购物车1. 介绍2. 代码实现步骤2.1 初始界面显示2.2 删除功能2.3 全选反选3. 总结 1. 介绍 这是一个Vue实例，实现一个简单的购物车功能。用于实践Vue的数据绑定，条件，循环，父子通信等功能。 2. 代码实现步骤 2.1 初始界面显示 <body> <div id="a_div"> <table style="width: 99%;" border="2px"> <tr> <th>
vue简单购物车
精通前端技术，了解后端接口
02-27 221
vue简陋购物车
vue开发购物车
mlonly的博客
02-23 4817
文件目录 资源请在博主资源内下载  vue开发购物车
Vue-案例（购物车）
若叶知秋的博客
03-02 487
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="../node_modules/bootstrap/dist/c
Vue实现简易购物车功能（初学篇拿来即用）
m0_71966801的博客
07-04 2040
当购物车数据发生变化，例如商品数量增加、价格计算等，Vue会自动重新渲染相关的视图部分，保持数据和视图的同步。例如添加商品、删除商品、编辑商品等操作，通过调用这些方法来更新购物车的数据和视图。计算属性和监听器：Vue还提供了计算属性和监听器的功能，用于处理一些复杂的逻辑计算和数据侦听。通过绑定事件，可以触发特定的逻辑操作，例如添加商品、删除商品、编辑商品等。数据绑定：使用Vue的模板语法将定义的数据与HTML模板进行绑定，将数据动态展示在页面上。选项定义购物车所需的数据，例如商品列表、商品数量、总价等。
vue实现简易购物车
y18774585870的博客
03-07 226
<template> <div> <!-- 这是自己写的 类似于购物车 的 选购 小demo --> <div style="display: flex"> <div style="margin: auto"> <el-radio-group v-model="radio1" @change="getConfigPrice()"> <el-radio-but
制作一个淘宝购物车vue页面代码
10-18
在Vue.js中创建一个简单的淘宝购物车页面，我们可以使用组件化的方式来实现。这里我会提供一个基础的结构示例，假设我们已经有了商品数据和一个添加到购物车的功能。以下是代码片段： ```html 我的购物车 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值