Vue realizes the function of book shopping cart

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

Rendering

Click to increase, decrease purchase quantity and remove the total price will change

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>Book Shopping Cart</title>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th, td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Book Title</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>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showPrice}}</td>
                        <td>
                            <!-- disabled is true when the button is disabled -->
                            <button @click="reduce(index)" v-bind:disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click="increase(index)">+</button>
                        </td>
                        <td><button @click="remove(index)">Remove</button></td>
                    </tr>
                </tbody>
            </table>
            <h2>Total price: {{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>Shopping cart is empty</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                books:
                    {
                        name: 'Introduction to Algorithms',
                        date: '2021-8-1',
                        price: 85.00,
                        count: 1
                    },
                    {
                        name: 'The Art of UNIX Programming',
                        date: '2021-8-2',
                        price: 69.00,
                        count: 1
                    },
                    {
                        name: 'Programming Pearls',
                        date: '2021-8-3',
                        price: 35.00,
                        count: 1
                    },
                    {
                        name: 'The Art of DOM Programming',
                        date: '2021-8-4',
                        price: 75.00,
                        count: 1
                    },
                    {
                        name: 'Nodejs in Simple Terms',
                        date: '2021-8-5',
                        price: 105.00,
                        count: 1
                    },
                ],
                
            },
            methods:{
                reduce(index){
                    this.books[index].count--;
                },
                increase(index){
                    this.books[index].count++;
                },
                remove(index){
                    this.books.splice(index,1);

                },
            },
            computed:{
                // The method written in the calculated attribute can be used directly as an attribute totalPrice(){
     //let totalPrice = 0;

                    // 1. Ordinary for loop // for (let i = 0; i < this.books.length; i++) {
                    // totalPrice += this.books[i].count * this.books[i].price;
                    // }

                    // 2. Ordinary for loop with simpler steps // for (let i in this.books) {
                    // totalPrice += this.books[i].count * this.books[i].price;
                    // }

                    // 3. for(let item of this.books)
                    //for(let item of this.books){
                        //totalPrice += item.count * item.price;
                    //}
                    //return totalPrice;

     // 4. High-order function writing reduce
     // Return the result directly without defining variables or traversing return this.books.reduce(function(pre, book){
                        return pre + book.price * book.count;
                    },0);
            },
            // Filters:{
                showPrice(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 how to use Vue to achieve the parabolic ball animation effect in the shopping cart
How to implement shopping cart details page in Vue

<<: How to configure Nginx load balancing

>>: GET POST Differences