Vue.js framework implements shopping cart function

This article shares the specific code of Vue.js framework to implement the shopping cart for your reference. The specific content is as follows

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../lib/vue.min.js"></script>
    </head>

    <body>

        <div id="app" style="position: relative;left: 30%">
            <table cellpadding="10">
                <thead>
                    <th><input type="checkbox" v-model="cb" v-on:click="allSelect">Select All</th>
                    <th>Name</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Amount</th>
                    <th>Operation</th>
                </thead>

                <tbody>
                    <tr v-for="x in info">
                        <td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>
                        <td>{{x.name}}</td>
                        <td>{{x.price}}</td>
                        <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td>
                        <td>{{x.total}}</td>
                        <td><button v-on:click="del(x)">Delete</button></td>
                    </tr>
                </tbody>
            </table>

            <Br>
            <p>Total amount: {{all}}</p>
        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    all: 0,
                    cb: false,
                    info: [{
                        bol: false,
                        name: "iphone7",
                        price: 6000,
                        num: 1,
                        Total: 6000
                    }, {
                        bol: false,
                        name: "Honor 6x",
                        price: 1200,
                        num: 1,
                        total: 1200
                    }, {
                        bol: false,
                        name: "dell laptop",
                        price: 4000,
                        num: 1,
                        Total: 4000
                    }]
                },
                methods: {
                    //Calculate unit price count: function(obj) {
                        for(var i = 0; i < this.info.length; i++) {
                            //
                            if(this.info[i] == obj) {
                                this.info[i].total = obj.price * obj.num;
                            }
                            //If selected, calculate the total price if(obj.bol) {
                                this.allSelect();
                            }
                        }
                    },
                    //delete del: function(obj) {
                        this.info.splice(this.info.indexOf(obj), 1)
                        this.allCount();
                    },

                    //Single-choice sign: function() {
                        this.allCount();
                    },
                    //Select allallSelect: function() {

                        for(var i = 0; i < this.info.length; i++) {
                            this.info[i].bol = this.cb;
                        }
                        this.allCount();
                    },
                    //Calculate the total price allCount: function() {
                        //Each time you calculate the total price, you must clear this.all = 0;
                        for(var i = 0; i < this.info.length; i++) {
                            //Calculate the selected product if(this.info[i].bol) {
                                this.all += this.info[i].total;
                            }
                        }
                    }

                }
            })
        </script>
    </body>

</html>

Effect picture:

For more articles, you can click "Vue.js Front-end Component Learning Tutorial" to study and read.

For tutorials on vue.js components, please click on the special vue.js component learning tutorial to learn.

For more Vue learning tutorials, please read the special topic "Vue Practical Tutorial"

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: