Vue模拟实现购物车结算功能

本文实例为大家分享了Vue实现购物车结算功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/jquery-3.6.0.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0
        }

        a {
            text-decoration: none;
        }
        .container {
            width: 500px;
            margin: 10px auto;
        }

        .title {
            width: 500px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            background-color: paleturquoise;
        }

        .item {
            position: relative;
            height: 50px;
            border-bottom: 1px solid paleturquoise;
        }

        .item img {
            float: left;
            width: 100px;
            height: 50px;
        }

        .item .price {
            position: absolute;
            float: left;
            width: 120px;
            margin-left: 10px;
            top: 15px;
            left: 100px;
        }

        .item .change {
            position: absolute;
            left: 220px;
            top: 15px;
            float: left;
            width: 200px;
        }

        .change a {
            float: left;
            display: block;
            width: 20px;
            height: 20px;
            font-size: 18px;
            text-align: center;
            line-height: 20px;
            background-color: #ccc;
        }

        .change input {
            float: left;
            width: 50px;
            margin: 0 5px;
        }

        .item .del {
            position: absolute;
            top: 8px;
            left: 420px;
            color: red;
            font-size: 24px;
        }

        .item .del:hover {
            top: 0;
            height: 50px;
            background-color: blue;
        }

        .total {
            position: relative;
            width: 500px;
            height: 50px;
            background-color: cornflowerblue;
        }

        .total span {
            position: absolute;
            top: 14px;
            left: 250px;
        }

        .total span em {
            color: red;
            font-style: normal;
            font-size: 20px;
        }

        .total button {
            position: absolute;
            top: 8px;
            left: 400px;
            width: 50px;
            height: 35px;
            border-radius: 25%;
            border: none;
            outline: none;
            background-color: tomato;
        }
    </style>

</head>
<body>
    <div id="app">

  <div>
    <div class="container">
        <my-cart></my-cart>
    </div>
  </div>

    </div>
    <script type="text/javascript">
   // 三个子组件
   var CartTitle = {
            props: ['uname'],
            template: `<div class="title">{{uname}}的商品</div>`
        }
        var CartList = {
            props: ['list'],
            template: ` <div class="list">
                    <div class="item" :key="item.id" v-for="item in list">
                        <img :src="item.img" alt="">
                        <div class="price">{{item.price}}¥/件</div>
                        <div class="change">
                            <a href="" @click.prevent=" sub(item.id)">-</a>
                            <input type="text" class="num" :value="item.num" @blur="changenum(item.id,$event)">
                            <a href="" @click.prevent=" add(item.id)">+</a>
                        </div>
                        <div class="del" @click="del(item.id)">×</div>
                    </div>
                </div>
                    `,
            methods: {
                // 向父组件传递需要删除的id
                del: function(id) {
                    // console.log(id);
                    this.$emit("del-cart", id);
                },
                // 修改表单输入的数量
                changenum: function(id, event) {
                    //console.log(id, event.target.value);
                    // 向父组件传递然后再修改数量
                    this.$emit('change-num', {
                        id: id,
                        num: event.target.value
                    })
                },
                // 点击减号按钮
                sub: function(id) {
                    this.$emit('sub-num', id);
                },
                //点击加号按钮
                add: function(id) {
                    this.$emit('add-num', id);
                }
            }
        }
        var CartTotal = {
                props: ['list'],
                template: `<div class="total">
                    <span>总价:<em>{{total}}</em>¥</span>
                    <button>结算</button>
                </div>`,
                computed: {
                    total: function() {
                        var sum = 0;
                        this.list.forEach(item => {
                            sum += item.price * item.num;
                        });
                        return sum;
                    }
                }
            }
            // 定义父组件
        Vue.component('my-cart', {
            data: function() {
                return {
                    uname: '我',
                    list: [{
                        id: 1,
                        name: '安踏鞋子',
                        price: 260,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 2,
                        name: '海尔热水器',
                        price: 2000,
                        num: 1,
                        img: 'img/hai.jpg'
                    }, {
                        id: 3,
                        name: 'iphone手机',
                        price: 7000,
                        num: 1,
                        img: 'img/iphone.jpg'
                    }, {
                        id: 4,
                        name: '华为手机',
                        price: 4500,
                        num: 1,
                        img: 'img/h.jpg'
                    }]
                }
            },
            template: `<div class="mycart">
                <cart-title :uname="uname"></cart-title>
                <cart-list :list="list" @del-cart="delcart($event)" @change-num="changeNum($event)" @sub-num="subnum($event)" @add-num="addnum($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);
                },
                // 根据id修改list中的数量num
                changeNum: function(val) {
                    //console.log(val);
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num = val.num;
                        }
                    })
                },
                //减号减少num
                subnum: function(event) {
                    // console.log(event); event是点击的id号
                    this.list.some(item => {
                        if (item.id == event && item.num > 0) {
                            item.num--;
                        }
                    })
                },
                // 加号增加num
                addnum: function(event) {
                    this.list.some(item => {
                        if (item.id == event) {
                            item.num++;
                        }
                    })
                }
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {

            }
        });

    </script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现购物车结算功能

    用vue做的购物车结算的功能,供大家参考,具体内容如下 代码: <!-- 占位 --> <template> <div> <div class="product_table"> <div class="product_info">商品信息</div> <div class="product_info">商品金额</div> <div class=

  • vue 实现购物车总价计算

    效果如下所示: js <script type="text/javascript"> window.οnlοad=function () { var vm = new Vue({ el:'#huo', data:{ myList:[ { number:0, price:23 }, { number:0, price:14.5 }, { number:1, price:8 }, { number:0, price:20 } ], total:0, //总价 bestValue

  • Vue模拟实现购物车结算功能

    本文实例为大家分享了Vue实现购物车结算功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor

  • vue简单实现购物车结算功能

    本文实例为大家分享了vue简单实现购物车结算的具体代码,供大家参考,具体内容如下 样式没有写 <template>  <div class="about container">    <button class="btn btn-default">      <router-link to="/customers">返回主页</router-link>    </button>

  • 使用jQuery实现购物车结算功能

    本文实例为大家分享了jQuery实现购物车结算功能展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script

  • 详解vue模拟加载更多功能(数据追加)

    使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组. //这是错误的写法 $.ajax({ type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType

  • jquery购物车结算功能实现方法

    先看看购物车结算效果: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>购物车结算</title> <meta name=&qu

  • Vue组件简易模拟实现购物车

    本文实例为大家分享了Vue组件模拟实现购物车的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti

  • jquery实现手机端单店铺购物车结算删除功能

    手机端一部分用flex布局写在这里看着不爽把css全部删除了.只留下js结算功能js很臃肿,请留下宝贵意见提升性能.改天上多店铺购物车手机端原版截图 效果图: 图(1)全部勾选的效果 图(2)勾选,点击"删除"效果 代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>购物车</title> <meta http-equiv="Con

  • 基于JQuery的购物车添加删除以及结算功能示例

    前段时间了解到购物车结算算是一个难点部分,在网上也找了一些,但是网上除了插件之外,就是一些半成品,比如一部分只有添加删除效果,另一部分只有结算功能,很少见到整合在一起的购物车效果,因此自己写了一个,方便大家查看 (添加效果没有飞入,实在懒得写动画效果了,凑合看吧) HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-

  • vue实现商城购物车功能

    本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=

随机推荐