Vue simulates the shopping cart settlement function

This article example shares the specific code of Vue to realize the shopping cart settlement function for your reference. The specific content is as follows

<!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">
   // Three subcomponents var CartTitle = {
            props: ['uname'],
            template: `<div class="title">{{uname}}'s products</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}}￥/piece</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: {
                // Pass the id to be deleted to the parent component
                del: function(id) {
                    // console.log(id);
                    this.$emit("del-cart", id);
                },
                // Change the number of form inputs changenum: function(id, event) {
                    //console.log(id, event.target.value);
                    // Pass to the parent component and then modify the quantity this.$emit('change-num', {
                        id: id,
                        num: event.target.value
                    })
                },
                // Click the minus button sub: function(id) {
                    this.$emit('sub-num', id);
                },
                //Click the plus button add: function(id) {
                    this.$emit('add-num', id);
                }
            }
        }
        var CartTotal = {
                props: ['list'],
                template: `<div class="total">
                    <span>Total price: <em>{{total}}</em>￥</span>
                    <button>Checkout</button>
                </div>`,
                computed: {
                    total: function() {
                        var sum = 0;
                        this.list.forEach(item => {
                            sum += item.price * item.num;
                        });
                        return sum;
                    }
                }
            }
            // Define the parent component Vue.component('my-cart', {
            data: function() {
                return {
                    uname: 'I',
                    list: [{
                        id: 1,
                        name: 'Anta shoes',
                        price: 260,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 2,
                        name: 'Haier water heater',
                        price: 2000,
                        num: 1,
                        img: 'img/hai.jpg'
                    }, {
                        id: 3,
                        name: 'iphone',
                        price: 7000,
                        num: 1,
                        img: 'img/iphone.jpg'
                    }, {
                        id: 4,
                        name: 'Huawei mobile phone',
                        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) {
                    // Delete the corresponding data in the list according to the id // 1. Find the index of the data corresponding to the id var index = this.list.findIndex(item => {
                        return item.id == id;
                    });
                    // 2. Delete the corresponding data according to the index this.list.splice(index, 1);
                },
                // Modify the number num in the list according to id
                changeNum: function(val) {
                    //console.log(val);
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num = val.num;
                        }
                    })
                },
                //minus sign to reduce num
                subnum: function(event) {
                    // console.log(event); event is the id number clicked this.list.some(item => {
                        if (item.id == event && item.num > 0) {
                            item.num--;
                        }
                    })
                },
                // plus sign increases num
                addnum: function(event) {
                    this.list.some(item => {
                        if (item.id == event) {
                            item.num++;
                        }
                    })
                }
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {
 
            }
        });
 
    
    </script>
    
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: