简单的购物车小案例

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量159 收藏
点赞数
文章标签： 前端 vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49378268/article/details/121597000
版权

主要实现是：动态计算商品价格和数量，可以在添加或者减少商品时，显示总价。

主要练习点：vue的组件化的基础和组件传值，指令，computed方法

效果图：

 

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container {}
        
        .container .cart {
            width: 300px;
            margin: auto;
        }
        
        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }
        
        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
        
        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }
        
        .container .total span {
            color: red;
            font-weight: bold;
        }
        
        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }
        
        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }
        
        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;
            left: 55px;
            font-size: 16px;
        }
        
        .container .item .price {
            position: absolute;
            width: 90px;
            top: 0;
            left: 110px;
            font-size: 16px
        }
        
        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }
        
        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration: none;
            background-color: lightgray;
            vertical-align: middle;
        }
        
        .container .item .change .num {
            width: 40px;
            height: 25px;
        }
        
        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }
        
        .container .item .del:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <cart></cart>

        </div>
    </div>


    <template id='cart_list'>

    <div>
      <div class="item" v-for='(item,index) in list'>
        <img :src="item.img" />
        <div class="name"> {{item.name}}</div>
        <div class="price"> {{item.price}} </div>
        <div class="change">


          <!-- <a href="" @click.prevent="subEvent(item,index)">－</a>
          <input type="text" class="num" :value="item.num" @change='changeNum(item,$event)' />
          <a href="" @click.prevent="addEvent(item,index)">＋</a> -->

          <a href="" @click.prevent="changeEvent(item,index,'sub',$event)">－</a>
          <input type="text" class="num" :value="item.num" @change="changeEvent(item,index, 'change', $event)" />
          <a href="" @click.prevent="changeEvent(item,index,'add',$event)">＋</a>
        </div>
        <div class="del" @click='delData(index)'>×</div>
      </div>

    </div>

  </template>



    <template id='titles'>
    <h1 class="title"> {{title}}</h1>
  </template>

    <template id='total'>
    <div class="total">
      <span>总价格: {{totalPrice}}</span>
      <button>结算</button>
    </div>
  </template>



    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        let cartList = [{
            "img": "./img/a.jpg",
            "name": "TCL",
            "price": 2000,
            "num": 5
        }, {
            "img": "./img/b.jpg",
            "name": "xiaomi",
            "price": 1999,
            "num": 1
        }, {
            "img": "./img/c.jpg",
            "name": "Haier",
            "price": 1999,
            "num": 1
        }, {
            "img": "./img/e.jpg",
            "name": "pptv",
            "price": 1999,
            "num": 1
        }]

        // 定义三个基础组件 
        // 购物车商品标题组件
        var titles = {
            template: "#titles",
            props: ['title']

        }

        //购物车商品展示组件
        var cart_list = {
            template: "#cart_list",
            // 接受 cart 组件传递过来的数据
            props: ['list'],
            methods: {
                //删除功能  因为我们的数据是父组件传递过来的 所以我们遵循单向数据流 我们不能直接更改父组件传递过来的数据
                delData(index) {
                    // alert(index)
                    this.$emit('delGoods', index)
                },


                changeEvent(item, index, type, event) {


                    let obj = {
                        type,
                        index,
                        item,
                        num: event.target.value * 1

                    }

                    this.$emit('changeGoods', obj)

                }




            }




        }




        //购物车计算总价格组件
        var total = {
            template: '#total',
            props: ['list'],

            computed: {


                totalPrice() {
                    return this.list.reduce((cur, current) => cur + current.price * current.num, 0)
                },



            }

        }



        //定义最外层组件
        Vue.component('cart', {
            template: `
       <div>
            <titles  :title='title'></titles>
    
            <cart_list :list='list'  @delGoods='deleteGoods'  @changeGoods='changeCartGoods'    
            ></cart_list>
            <total  :list='list'></total>
        </div>
      `,
            data() {
                return {
                    list: [],
                    title: '购物车标题'

                }
            },
            methods: {
                //删除功能
                deleteGoods(i) {
                    // alert(i)
                    let currentIndex = this.list.findIndex((item, index) => index == i)
                    this.list.splice(currentIndex, 1)

                },
                changeCartGoods({
                    index,
                    item,
                    num,
                    type
                }) {


                    if (type == 'add') {
                        this.list.forEach((item, i) => {
                            if (i == index) {
                                item.num += 1
                            }
                            return
                        })
                    } else if (type == 'sub') {
                        this.list.forEach((item, i) => {
                            if (i == index) {
                                item.num -= 1

                                if (item.num <= 0) {
                                    item.num = 1
                                    alert('不能再减了')

                                    return

                                }
                            }
                        })
                    } else {
                        this.list.forEach((item, i) => {
                            if (i == index) {
                                item.num = num
                                return
                            }
                        })

                    }
                }

            },

            mounted() {
                this.list = cartList
            },

            components: {
                titles,
                cart_list,
                total
            }
        })



        var vm = new Vue({
            el: '#app',
            data: {




            },


        });
    </script>
</body>

</html>

jackzcq~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单购物车案例.html
04-24
一个简单的vue购物车案例，希望能够对你们有用，希望各位不要嫌弃。
购物车案例【简单版】
3y
02-20 999
前言为了巩固MVC的开发模式，下面就写一个购物车的小案例..①构建开发环境导入需要用到的开发包建立程序开发包②设计实体书籍实体购物车与购物项实体可能我们会这样设计购物车上...
购物车简单案例
qq_75277260的博客
12-02 171
创建一个简单的购物车案例
购物车小案例【简单版】
chenzhuofei4155的博客
01-21 252
前言 为了巩固MVC的开发模式，下面就写一个购物车的小案例. ①构建开发环境 导入需要用到的开发包 建立程序开发包 ②设计实体 书籍实体 public class Book { private Str...
购物车的完美例子
08-31
购物车一直算是Android不算太简单的逻辑，所以一般实现起来还要一定的时间，这个Demo 采用的RecyclerView嵌套RecyclerView，可以提交多个商品的购物车；
Vue案例01-实现简易购物车
欢迎访问我的主页：https://www.bookbook.cc
07-25 9530
Vue实现简易购物车
vue实现购物车小案例
12-13
本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下 最终效果 HTML部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
Android实现一个简易版本的购物车小案例
10-21
Android实现一个简易版本的购物车小案例。 （1）主要功能 1、用户注册、用户登录。 2、商品、购物车列表 （2）android 1、ViewPager2 + Fragment实现页面的切换。 2、SQLite数据库、基础组件的使用。 3、shape和...
小程序购物车案例
03-30
该资源是小程序购物车实现案例源码，功能包括选中，全选，数量增减，删除，收藏。价格自动计算等等基本功能
【JavaScript源代码】Vue实现简单购物车小案例.docx
12-29
Vue实现简单购物车小案例 　本文实例为大家分享了Vue实现简单购物车的具体代码，供大家参考，具体内容如下　HTML首页　<!DOCTYPE html>　　<html lang="en">　　<head>　　 <meta charset="UTF-8">　...
简单购物车案例
weixin_44130041的博客
08-28 1211
这里是css样式 <style> table { width: 1000px; margin: 0 auto; border-collapse: collapse; } td { width: 150px; border: 1px solid skyblue; l...
简单购物车应用案例
i_belive_my_love的博客
10-09 1651
设计一个简单的购物车，模拟网上购物中购物车的形成。 本案例设计两个商品购买页面，页面之间可以互相跳转，选择好商品提交后数据会保存至购物车。购物过程是在session范围内完成的，需要使用session对象实现信息的共享。 购买肉类商品页面代码： 肉类商品界面 <% request.setCharacterEncoding("UTF-8");
简单的购物车项目案例
weixin_62270300的博客
03-12 436
登录 要求： 1对用户名和密码进行正则判断，并对输入的值进行判断 2.点击登录跳转到购物车界面 3.没有账号点击注册 进入注册界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { height: 100vh; display: flex; justif
父子组件的数据和事件传递
weixin_30700977的博客
05-09 165
当在vue中定义一个子组件，从父组件给子组件传递数据可以通过在子经组件定义中通过props属性来传递数据过去： <div id="box"> <cart :goods="goods"></cart> <span>总价：{{totalPrice}}元</span> </div>...
HTML ionic 实现简单购物车 +-数量 选择
遗声落西秦
12-14 1203
input{ text-align: center; } angular.module("myApp", []) .controller("democ", function($scope) { /* 1 创建数据的操作 */ $scope.datas = [{ state: false, head: "htt
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue简单实习购物车案例
08-19
下面是一个简单的 Vue.js 实现的购物车案例： ```html <!DOCTYPE html> <title>Vue Shopping Cart <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 购物车 {{ item.name }} -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值