Vue实现购物车功能

最新推荐文章于 2024-07-06 18:15:35 发布
最新推荐文章于 2024-07-06 18:15:35 发布
阅读量859 收藏 7
点赞数 1
文章标签： css vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58225312/article/details/120493734
版权
本文通过四个步骤详细介绍了如何使用Vue.js实现购物车功能，包括商品选择、数量增减、全选与取消全选、删除商品等操作。通过计算属性与v-model绑定，实现商品总价和已选数量的实时更新。
摘要由CSDN通过智能技术生成

vue是前端轻量级MVVM框架，入门门槛相对较低，今天用Vue做一个购物车实例，发表以便记录

原理分析和实现

首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
       blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul {
            margin: 0;
            padding: 0;
        }
       .clearfix{
          zoom: 1;
       }
        .clearfix:after {
            clear: both;
        }
        .clearfix:after {
            content: '.';
            display: block;
            overflow: hidden;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
            width: 0;
            height: 0;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        img{vertical-align: middle;}
        .page-shopping-cart {
            width: 1200px;
            margin: 50px auto;
            font-size: 14px;
            border: 1px solid #e3e3e3;
            border-top: 2px solid #317ee7; }
        .page-shopping-cart .cart-title {
            color: #317ee7;
            font-size: 16px;
            text-align: left;
            padding-left: 20px;
            line-height: 68px; }
        .page-shopping-cart .red-text {
            color: #e94826; }
        .page-shopping-cart .check-span {
            display: block;
            width: 24px;
            height: 20px;
            background: url("shopping_cart.png") no-repeat 0 0; }
        .page-shopping-cart .check-span.check-true {
            background: url("shopping_cart.png") no-repeat 0 -22px; }
        .page-shopping-cart .td-check {
            width: 70px; }
        .page-shopping-cart .td-product {
            width: 460px; }
        .page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total {
            width: 160px; }
        .page-shopping-cart .td-do {
            width: 150px; }
        .page-shopping-cart .cart-product-title {
            text-align: center;
            height: 38px;
            line-height: 38px;
            padding: 0 20px;
            background: #f7f7f7;
            border-top: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3; }
        .page-shopping-cart .cart-product-title .td-product {
            text-align: center;
            font-size: 14px; }
        .page-shopping-cart .cart-product-title .td-check {
            text-align: left; }
        .page-shopping-cart .cart-product-title .td-check .check-span {
            margin: 9px 6px 0 0; }
        .page-shopping-cart .cart-product {
            padding: 0 20px;
            text-align: center; }
        .page-shopping-cart .cart-product table {
            width: 100%;
            text-align: center;
            font-size: 14px; }
        .page-shopping-cart .cart-product table td {
            padding: 20px 0; }
        .page-shopping-cart .cart-product table tr {
            border-bottom: 1px dashed #e3e3e3; }
        .page-shopping-cart .cart-product table tr:last-child {
            border-bottom: none; }
        .page-shopping-cart .cart-product table .product-num {
            border: 1px solid #e3e3e3;
            display: inline-block;
            text-align: center; }
        .page-shopping-cart .cart-product table .product-num .num-do {
            width: 24px;
            height: 28px;
            display: block;
            background: #f7f7f7; }
        .page-shopping-cart .cart-product table .product-num .num-reduce span {
            background: url("shopping_cart.png") no-repeat -40px -22px;
            display: block;
            width: 6px;
            height: 2px;
            margin: 13px auto 0 auto; }
        .page-shopping-cart .cart-product table .product-num .num-add span {
            background: url("shopping_cart.png") no-repeat -60px -22px;
            display: block;
            width: 8px;
            height: 8px;
            margin: 10px auto 0 auto; }
        .page-shopping-cart .cart-product table .product-num .num-input {
            width: 42px;
            height: 28px;
            line-height: 28px;
            border: none;
            text-align: center; }
        .page-shopping-cart .cart-product table .td-product {
            text-align: left;
            font-size: 12px;
            line-height: 20px; }
        .page-shopping-cart .cart-product table .td-product img {
            border: 1px solid #e3e3e3;
            margin-right: 10px; }
        .page-shopping-cart .cart-product table .td-product .product-info {
            display: inline-block;
            vertical-align: middle; }
        .page-shopping-cart .cart-product table .td-do {
            font-size: 12px; }
        .page-shopping-cart .cart-product-info {
            height: 50px;
            line-height: 50px;
            background: #f7f7f7;
            padding-left: 20px; }
        .page-shopping-cart .cart-product-info .delect-product {
            color: #666; }
        .page-shopping-cart .cart-product-info .delect-product span {
            display: inline-block;
            vertical-align: top;
            margin: 18px 8px 0 0;
            width: 13px;
            height: 15px;
            background: url("shopping_cart.png") no-repeat -60px 0; }
        .page-shopping-cart .cart-product-info .product-total {
            font-size: 14px;
            color: #e94826; }
        .page-shopping-cart .cart-product-info .product-total span {
            font-size: 20px; }
        .page-shopping-cart .cart-product-info .check-num {
            color: #333; }
        .page-shopping-cart .cart-product-info .check-num span {
            color: #e94826; }
        .page-shopping-cart .cart-product-info .keep-shopping {
            color: #666;
            margin-left: 40px; }
        .page-shopping-cart .cart-product-info .keep-shopping span {
            display: inline-block;
            vertical-align: top;
            margin: 18px 8px 0 0;
            width: 15px;
            height: 15px;
            background: url("shopping_cart.png") no-repeat -40px 0; }
        .page-shopping-cart .cart-product-info .btn-buy {
            height: 50px;
            color: #fff;
            font-size: 20px;
            display: block;
            width: 110px;
            background: #ff7700;
            text-align: center;
            margin-left: 30px; }
        .page-shopping-cart .cart-worder {
            padding: 20px; }
        .page-shopping-cart .cart-worder .choose-worder {
            color: #fff;
            display: block;
            background: #39e;
            width: 140px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            text-align: center;
            margin-right: 20px; }
        .page-shopping-cart .cart-worder .choose-worder span {
            display: inline-block;
            vertical-align: top;
            margin: 9px 10px 0 0;
            width: 22px;
            height: 22px;
            background: url("shopping_cart.png") no-repeat -92px 0; }
        .page-shopping-cart .cart-worder .worker-info {
            color: #666; }
        .page-shopping-cart .cart-worder .worker-info img {
            border-radius: 100%;
            margin-right: 10px; }
        .page-shopping-cart .cart-worder .worker-info span {
            color: #000; }

        .choose-worker-box {
            width: 620px;
            background: #fff; }
        .choose-worker-box .box-title {
            height: 40px;
            line-height: 40px;
            background: #F7F7F7;
            text-align: center;
            position: relative;
            font-size: 14px; }
        .choose-worker-box .box-title a {
            display: block;
            position: absolute;
            top: 15px;
            right: 16px;
            width: 10px;
            height: 10px;
            background: url("shopping_cart.png") no-repeat -80px 0; }
        .choose-worker-box .box-title a:hover {
            background: url("shopping_cart.png") no-repeat -80px -22px; }
        .choose-worker-box .worker-list {
            padding-top: 30px;
            height: 134px;
            overflow-y: auto; }
        .choose-worker-box .worker-list li {
最低0.47元/天 解锁文章
大马猴前端
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现商城购物车功能
12-29
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下 首先，先上最终的效果图 效果并不是很好看，但是这不是重点。 首先，我们先看下布局： 购物车 (item,index)> ...
浅谈Vue的加载顺序探讨
08-29
本篇文章主要介绍了Vue的加载顺序探讨，详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中关于computed、methods、watch，mounted的区别
qq_39399050的博客
06-23 6520
computed
vue学习笔记（购物车小案例）
最新发布
mez_Blog的博客
07-06 744
写一个按钮，当我们点击按钮的时候，就可以看到arrTest2返回的值，我们可以看到多了一个true，因为在执行every后，this.testEvery=true，对应页面的testEvery值也会进行显示。然后解释一下，这里首先使用filter方法将满足选中状态的商品进行过滤，返回的是一个数组，然后再将返回的数组使用累加方法reduce进行金额的计算。解释一下，第一个参数就是传递过来的值，是加1，还是加-1，第二个值就是对应的索引，因为要对对应的商品进行数量加减操作，所以需要对应商品的索引。
Vue组件加载顺序
一蓑烟雨97的博客
06-20 3797
Vue组件加载顺序
vue中文件加载顺序
Lucky_girl_wan的博客
02-20 5080
从加载顺序中可以看出main.js是先执行的，但出现（index.html>app.vue>main.js）问题是由ES6的模块化加载规则导致的。因为ES6是编译时加载且import命令具有提升效果，会提升到整个模块的头部，优先执行，故导致上述问题。ES6、CommonJs、AMD的加载规则。
vue项目中主要文件的加载顺序
handsome_man__的博客
11-24 1014
index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码。vue项目中主要文件的加载顺序。
vue实现购物车功能.zip
02-10
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个购物车功能。Vue.js是一个轻量级、渐进式前端JavaScript框架，它以其简洁的API和强大的功能深受开发者喜爱。在购物车应用中，我们需要关注的主要功能有：全选/...
vue实现购物车功能（商品分类）
11-20
以下将详细解析给出的代码片段，并介绍如何利用Vue实现购物车功能，特别是商品分类。 1. **数据结构**： 在Vue实例中，`data`对象包含了整个应用的状态。`lists`数组是主要的数据源，它包含多个子数组，每个子数组...
Vue 的组件加载顺序和渲染顺序
小草莓的博客
09-23 2387
综上所述，Vue 中组件的加载和渲染顺序是先加载父组件，再递归地加载子组件，然后按照深度优先遍历的方式渲染子组件，再依次向上渲染父组件。
vue.js页面加载执行created,mounted的先后顺序说明
01-21
created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考 学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。 我们也都知道在Vue父子组件可以通过Props实现父组件传递到子组件。 在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到
vue computed 与mounted 区别
热门推荐
小米粒的博客
04-29 1万+
1.computed computed 是计算属性 属性 method是 方法 使用 computed 性能会很好，但是如果你不希望缓存，你可以使用 methods 属性。 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调...
vue项目的加载顺序
monparadis的博客
12-08 5731
vue项目的入口：main.js vue项目唯一的页面：index.html vue的特点：就是将所有的vue页面（实质上是所有的js代码），全部整合到app.vue（app.js）中合成一个template放入index.html中的页面里面 vue的加载顺序：先加载组件，然后是加载app.vue（由内往外加载），所以很多小伙伴（其实是我）把一切请求放到app.vue的mounted中使用，再从组件中调用其实就大错特错了，实际上你会发现组件中的mouted方法会先执行，你要获取的变量其实未定义 但
Vuejs中关于computed、methods、watch，mounted的区别
weixin_30700977的博客
11-14 532
1.computed是在HTML DOM加载后马上执行的，如赋值； 2.methods则必须要有一定的触发条件才能执行，如点击事件； 3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。 所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先met...
vue 组件数据加载解析顺序
weixin_45549481的博客
02-29 1220
vue组件数据加载解析顺序
vue的5种加载顺序
weixin_47950594的博客
11-16 2051
vue父子组件的加载顺序父子组件的加载顺序子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子父组件更新顺序销毁过程有多个子组件的加载顺序 父子组件的加载顺序 1.父 beforeCreate 2.父 created 3.父 beforeMount 4.子 beforeCreate 5.子 created 6.子 beforeMount 7.子 mounted 8.父 mounted 子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子 1.父 beforeUpdat
运行vue时，文件的执行顺序
黔肆的博客
05-17 517
vue基础-项目的文件执行顺序
vue组件的加载顺序,看完之后收获满满~~~
几乎每一篇都是保姆级讲解
06-06 3501
这篇文章不是项目上的问题,而是vue组件加载的一个过程,为什么突发奇想的写一篇这个文章,那是因为我,还有很多的人,可能对页面执行的一个顺序都不知道,只知道写功能,然后到了出bug的时候,都不知道是哪里出了问题,所以这篇文章是重中之重,我将带大家去领悟领悟首先,看下图,这是一个父组件,里面包括了很多子组件下面我们就举例这两个组件说明,他们的script是怎么执行的呢?据我的结论就是他执行的顺序是子组件按照从上到下依次执行,但是需要注意的是,如果一个组件里面有mounted他们会后执行,再去执行其他组件,有点绕
springboot+vue实现购物车功能
11-13
实现购物车功能需要结合Spring Boot和Vue框架，以下是一种可能的实现方案。 首先，在Spring Boot中创建商品和购物车相关的数据模型和数据库表结构。可以创建商品表、购物车表，以及中间表来建立商品和购物车之间的关系。通过JPA或者MyBatis等框架与数据库进行交互，实现增删改查等基本的数据操作。 接下来，使用Spring Boot创建商品和购物车相关的接口。可以创建商品的添加、删除、修改等接口，以及购物车的商品添加、删除、修改接口。在接口中，可以处理一些逻辑，比如商品添加到购物车时可以判断购物车是否已存在该商品，如果存在则数量增加，不存在则添加新的购物车项。 在Vue中，创建商品列表和购物车页面。可以使用axios等工具从后端获取商品列表，并展示给用户。用户在页面上可以点击“加入购物车”按钮，将选中的商品添加到购物车中。在购物车页面，展示当前用户已添加的购物车商品列表，并实现数量增减和删除的功能。每次数量改变或删除操作时，通过接口与后端进行数据交互，更新购物车中的商品信息。 在Vue中，还需要实现购物车商品总价的计算和结算功能。可以通过遍历购物车商品列表，计算每个商品的小计，再将所有小计相加得到总价。用户点击结算按钮时，可以将购物车商品列表传递给后端进行支付操作。 以上是基本的购物车功能实现方案。当然，具体实现过程中可能还会涉及到其他细节问题，比如商品详情展示、用户登录、权限控制等，需要根据实际需求进一步完善和实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值