Vue implements a shopping cart that can change the shopping quantity

This article shares with you how to use Vue to change the shopping cart quantity for your reference. The specific content is as follows

Effect picture:

Knowledge points:

1. Computed properties
2. Filters

Implementation code:

<!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>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #ccc;
    }
    
    td,
    th {
        padding: 8px 16px;
        border: 1px solid #ccc;
        text-align: left;
    }
    
    th {
        background-color: #f7f7f7;
        color: #5c6b77;
    }
</style>

<body>
    <div id="box">
        <div v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Book Name</th>
                        <th>Publication Date</th>
                        <th>Price</th>
                        <th>Purchase quantity</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | toprice}}</td>
                        <td>
                            <button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
                            <button @click='add(index)'>+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>Total price: {{getallprice | toprice}}</h2>
        </div>
        <h2 v-else>You have no shopping information</h2>
    </div>
    <script>
        const vm = new Vue({
            el: "#box",
            data: {
                books: [{
                    id: 1,
                    name: "《vue.js actual combat》",
                    date: "2010.2.4",
                    price: 82.00,
                    Aunt: 1
                }, {
                    id: 2,
                    name: "Javascript Practice",
                    date: "2010.2.4",
                    price: 108.00,
                    Aunt: 1
                }, {
                    id: 3,
                    name: "《html+css practice》",
                    date: "2010.2.4",
                    price: 42.50,
                    Aunt: 1
                }, {
                    id: 4,
                    name: "Axios Practice",
                    date: "2010.2.4",
                    price: 82.00,
                    Aunt: 1
                }, {
                    id: 5,
                    name: "jquery practice",
                    date: "2010.2.4",
                    price: 65.20,
                    Aunt: 1
                }, ]
            },
            methods: {
                add(index) {
                    this.books[index].aunt++;
                },
                down(index) {
                    this.books[index].aunt--;
                },
                remove(index) {
                    this.books.splice(index, 1)
                },

            },
            computed: {
                getallprice() {
                    let all = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        all += this.books[i].price * this.books[i].aunt
                    }
                    return all
                }
            },
            filters:
                toprice(price) {
                    return '￥' + price.toFixed(2)
                },

            }
        })
    </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:

Vuejs teaches you step by step to write a complete shopping cart example code
Implementing shopping cart function based on Vuejs
Vue implements shopping cart function
Vue implements a small case of shopping cart
Vue realizes the shopping cart function of the mall
Vue realizes shopping cart total price calculation
Simple shopping cart function example implemented by vuex
vue+vant-UI framework realizes the checkbox selection and deselection function of the shopping cart
Detailed explanation of the shopping cart function implemented by Vue.js
Vuejs implements shopping cart function

<<: Detailed explanation of the role and working principle of MySQL master-slave replication

>>: VMwarea virtual machine installation win7 operating system tutorial diagram