vue实战案例4-基于组件的购物车案例

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

在这里插入图片描述

<head>
    <style>
        #mycart{ width: 600px; margin: 0 auto;}
        #mycart h2{ text-align: center; height:56px; line-height: 56px; text-align: center;  background-color:mediumturquoise;}
        #mycart .item{display:flex; padding:20px 0; flex-direction:row; border-bottom: 2px solid mediumturquoise;}
        #mycart .item img{ width: 110px;}
        #mycart .item .name{ width: 200px; padding-left: 12px;}
        #mycart .item .change{ width: 200px; padding-left: 20px;}
        #mycart .item .change a{ display:inline-block; width: 26px; height: 26px; line-height: 26px; text-align:center; border:1px solid #e6e6e6; background-color: #f1f1f1; text-decoration:none;}
        #mycart .item .num{ width: 60px; height: 30px;}
        #mycart .item .del{ font-size:22px; cursor:pointer; color:red;}
        #mycart .total{ height: 60px; background-color: orange; color: red; text-align:right; line-height:60px;}
        #mycart .total b{ padding: 0 10px;}
    </style>
</head>
<body>
    <div id="mycart">
        
        <my-cart></my-cart>
        
    </div>


</div>
<script src="js/vue.js"></script>
<script>
    var CartTitle={
        props:['uname'],
        template:`
        <h2>{{uname}}的商品</h2>
        `
    };
    var CartList={
        props:['list'],
        template:`
        <div>
            <div class="item" :key="item.id" v-for="item in list">
                <img :src="item.img" :alt="item.name">
                <div class="name">{{item.name}}</div>
                <div class="change">
                <a href="" @click.prevent='sub(item.id)'>-</a>
                <input type="text" class="num" :value='item.num' @blur='changNum(item.id,$event)'>
                <a href="" @click.prevent='add(item.id)'>+</a>
                </div>
                <div class="del" @click='cartdel(item.id)'>X</div>
            </div>
        </div>
        `,
        methods:{
            cartdel:function(id){
                //把id传递给父组件
                this.$emit('cart-del',id);
            },
            changNum:function(id,event){
                //用对象的方式传递给父组件
                this.$emit('change-num',{
                    id:id,
                    type:'change',
                    num:event.target.value
                })
            },
            sub:function(id){
                this.$emit('change-num',{
                    id:id,
                    type:'sub'
                })
            },
            add:function(id){
                this.$emit('change-num',{
                    id:id,
                    type:'add'
                })
            }
        }
    };
    var CartTotal={
        props:['list'],
        template:`
        <div class="total">总价格：<b>{{total}}</b>元</div>
        `,
        computed:{
            total:function(){
                //计算商品的价格
                var t=0;
                this.list.forEach(element => {
                    t += element.price*element.num
                });
                return t;
            }
        }
    };
//全局注册组件 及三个局部子组件
 Vue.component('my-cart',{
     template:`
        <div>
            <cart-title :uname='uname'></cart-title>
            <cart-list :list='list' @cart-del='delCart($event)' @change-num='changeNum($event)'></cart-list>
            <cart-total :list='list'></cart-total>
        </div>
     `,
     components:{
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
     },
     methods:{
        delCart:function(id){
            //根据id删除list中对应的数据
            //1.找到id对应数据的索引
            var index=this.list.findIndex(item =>{
                return item.id==id;
            })
            //2.根据索引删除对应的数据
            this.list.splice(index,1);
        },
        changeNum:function(val){
            //分为三种情况：输入域变更，加号变更，减号变更
            if(val.type=="change"){
                //根据子组件传递过来的数据更新list中对应的数据
                this.list.some(item=>{
                    if(item.id==val.id){
                        item.num=val.num;
                        //终止遍历
                        return true;
                    }
                })
            }else if(val.type=="sub"){
                //减一操作
                this.list.some(item =>{
                    if(item.id==val.id){
                        item.num -= 1;
                        return true;
                    }
                })
            }else if(val.type=="add"){
                //加一操作
                this.list.some(item =>{
                    if(item.id==val.id){
                        item.num += 1;
                        return true;
                    }
                })
            }
           
        }
     },
     data:function(){
         return {
            uname:'张三',
            list:[
                {
                    id:1,
                    name:'4K55寸电视',
                    price:1000,
                    num:1,
                    img:'img/a.jpg'
                },{
                    id:2,
                    name:'5K55寸电视',
                    price:1000,
                    num:3,
                    img:'img/b.jpg'
                },{
                    id:3,
                    name:'5K65寸电视',
                    price:1000,
                    num:1,
                    img:'img/c.jpg'
                },{
                    id:4,
                    name:'4K75寸电视',
                    price:1000,
                    num:2,
                    img:'img/d.jpg'
                }
            ]
         }
     },
     
 });
 var vm=new Vue({
     el:'#mycart',
     data:{

     }
 })
</script>
</body>
月小满
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue案例】——实现简易购物车功能
m0_50785976的博客
07-19 1万+
简易购物车功能的实现
前端笔记Vue项目day3(八）
czbkzmj的博客
09-18 266
4. 实现组件更新数据功能上 将输入框中的默认数据动态渲染出来 输入框失去焦点的时候 更改商品的数量 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据 父组件中接收子组件传递过来的数据并处理 [mw_shl_code=applescript,true]<div id="app"> <div cl...
vue实现商品列表添加购物车，编辑购物车功能
03-18
vue实现商品列表添加购物车，编辑购物车功能
vue实现购物车简单功能
weixin_45815557的博客
05-10 7477
1、写商品信息数据 2、点击加入购物车按钮，将数据加入到购物车内部（此处购物车与商品信息写在同一个页面内） 添加按钮 添加按钮的方法 <script> export default{ methods:{ //点击添加按钮，将数据添加到购物车(即空数组baskets)中去，并对数量就行添加 addFood(row){ let boo = false; let index = 0; //index是如果存在这个产品
【VUE】VUE2实现购物车案例-代码分享
最新发布
qiaomm的个人博客
06-11 368
【代码分享】【VUE】VUE2实现购物车案例。
vue实现简单购物车功能
荔枝吖阿
08-10 3305
简单的示例图如下 主要是全选，取消全选，单选，商品的数量的+1，-1进行这些操作时，商品总价格是不断变化的（用的vant-ui插件https://youzan.github.io/vant/#/zh-CN/） <template> <div class="home"> <ul> <li v-for="(item,index) in cartList" :key="item.id"> <van-ch..
vue实现完整的购物车功能(包括单选全选，删除商品和结算商品功能)
热门推荐
YanGo的博客
06-03 2万+
首先来看看效果图 预览地址：http://xy.xxiaoyuan.top/demo/shopCart/#/ 项目开始之前需要选安装好node跟vue和vue-cli 如果还没安装的可以看这里（mac环境下的）https://blog.csdn.net/weixin_39644462/article/details/86302579 1. 首先创建一个vue项目(命令行如下) ...
电商项目-基于SSM+VUE的B2C电商项目
11-11
总的来说，基于SSM+Vue的B2C电商项目是一个集成了多种技术的综合性实战案例，它不仅涵盖了Web开发的核心技术，也体现了现代互联网开发的趋势和最佳实践，对于学习和提升全栈开发技能具有很高的参考价值。
基于Springboot+Vue购物推荐网站设计源码案例设计.zip
04-21
"案例设计"意味着这是一个实战案例，适合用于实际应用开发的参考。 【压缩包子文件的文件名称列表】中的"code-91"可能是指项目的源代码目录，其中包含了所有相关的Java、HTML、CSS、JavaScript等文件，以及可能的...
vue项目实战-使用vue开发的点外卖App-附项目源码.zip
01-26
本项目是一个基于Vue.js的实际应用案例，旨在帮助开发者掌握如何利用Vue.js来构建一个完整的点外卖应用程序。通过实践这个项目，你可以深入了解Vue的核心概念，如虚拟DOM、组件系统、响应式数据绑定以及生命周期钩子...
品优购实战案例-个人模仿版
01-02
在IT行业中，实战案例是提升技能、学习新知识的重要途径。"品优购实战案例-个人模仿版"是一个个人开发的项目，旨在模拟真实的电商购物平台"品优购"的功能和流程，帮助开发者理解和实践电商平台的构建过程。在这个...
2019最新vue.js仿锤子商城实战.txt
12-18
vue实战课件.rar - 753.78KB 9-商品详情页数据.mp4 - 47.48MB 8-购物车小球效果.mp4 - 35.91MB 7-购物车商品删除.mp4 - 45.73MB 6-商品加入购物车.mp4 - 46.18MB 5-商品页组件.mp4 - 16.13MB 4-...
【Vue项目复习笔记】将商品添加到购物车
qq_40992225的博客
08-10 2691
将商品添加到购物车要先监听购物车点击在DetailBottomBar.vue中监听然后在Detail.vue的detail-bottom-bar标签中在methods中我们需要从详情页拿到商品的数据，然后在购物车里面显示，所以我们可以通过Vuex首先安装vuex然后在store文件夹中新建index.js然后在main.js里面做一个导入。再到但是实际上能不能像上面这样做呢？不能，任何修改state里面的东西都要通过mutations然后在Detail.vue的methods中。...
vue组件化实现购物车案例
weixin_43485190的博客
07-11 4062
这个案例主要是对组件化知识的应用，如何注册组件、父子组件间相互传递数据等有了一个实践。 案例一共分为三个组件，分别为标题组件、列表组件、结算组件。 首先是写一个静态页面，然后根据静态页面来进行组件化划分。 如下图所示： 标题组件：通过父组件向子组件传递数据的方式，在父组件定义数据，然后将用户的动态名传递给子组件，在子组件中通过props属性来接收数据。 列表组件：实现的功能主要有三个： ①渲染价格功能：也是通过父组件向子组件传递数据，将父组件中的list数据中的price渲染到列表中； ②删除商品
Vue-购物车案例
a_xia_o的博客
07-21 675
1.案例效果 2.实现步骤 ①初始化项目基本结构 ②封装EsHeader组件 2.1创建并注册EsHeader组件 2.2封装es-header组件 ③基于axios请求商品列表数据（GET请求，地址为https://www.escook.cn/api/cart） ④封装EsFooter组件 4.1创建并注册EsFooter组件 4.2封装es-footer组件 4.2.0封装需求 4.2.1渲染组件的基础布局 4.
vue实现简单的购物车案例
m0_66970189的博客
06-25 2355
案例需要引入vue.js，使用时自行引入
Vue实现购物车功能
2201_75321887的博客
06-03 6157
使用Vue组件完成一个带自动计算、删除、修改、选择、搜索、添加功能的购物车功能
vue--实现购物车案例
小白小白从不日别的博客
12-13 8329
最终效果图： 这里我们将头部区域、列表区域、以及列表里的增加和减少商品数量的区域、以及底部计算区域分别单独封装为一个组件，如下： 大致实现步骤如下： 1. 安装项目所需的第三方包 通过 npm install bootstrap@4.6.0 --save 安装 bootstrap 通过 npm install less less-loader@5.0.0 --save 安装 less main.js – 引入bootstrap样式： import 'bootstra...
组件案例——购物车
weixin_52629158的博客
05-24 369
前面我们学了组件，我们也知道Vue的核心是组件系统和数据驱动，下面我们来做一个购物车的案例，巩固深化一下我们所学的理论知识。子组件中不推荐操作父组件的数据，有可能多个子组件使用父组件的数据，我们需要把数据 传递给父组件 让父组件操作数据。子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据。从父组件把商品列表list 数据传递过来 即 父向子组件传值。从父组件把商品列表list 数据传递过来 即 父向子组件传值。父组件中接收子组件传递过来的数据并处理。把传递过来的数据渲染到页面上。
vue3-virtual-scroller组件的安装
04-28
vue3-virtual-scroller是一个用于Vue.js 3的虚拟滚动组件，它可以提高大型列表的性能和渲染效率。要安装vue3-virtual-scroller组件，您可以按照以下步骤进行操作： 1. 首先，确保您已经在项目中安装了Vue.js 3。如果没有安装，请先执行以下命令进行安装： ``` npm install vue@next ``` 2. 接下来，您可以使用npm或者yarn来安装vue3-virtual-scroller。打开终端并执行以下命令： 使用npm： ``` npm install vue3-virtual-scroller ``` 使用yarn： ``` yarn add vue3-virtual-scroller ``` 3. 安装完成后，在您的Vue应用程序的入口文件（通常是main.js或者App.vue）中引入vue3-virtual-scroller组件。您可以使用以下代码进行引入： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import VirtualScroller from 'vue3-virtual-scroller'; createApp(App) .use(VirtualScroller) .mount('#app'); ``` 4. 现在，您可以在您的Vue组件中使用vue3-virtual-scroller组件了。例如，在您的模板中添加以下代码： ```html <template> <virtual-scroller :items="items" item-height="50"> <template v-slot="{ item }"> <div>{{ item }}</div> </template> </virtual-scroller> </template> ``` 这是一个基本的安装和使用vue3-virtual-scroller组件的示例。您可以根据您的需求进行配置和定制。希望对您有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值