Vue realizes the function of book shopping cart

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

Recommend

Steps to create a Vite project

Table of contents Preface What does yarn create d...

mysql solves the problem of finding records where two or more fields are NULL

Core code /*-------------------------------- Find...

Solution to CSS anchor positioning being blocked by the top fixed navigation bar

Many websites have a navigation bar fixed at the ...

Implementation of CSS3 3D cool cube transformation animation

I love coding, it makes me happy! Hello everyone,...

Example of adding attributes using style in html

Add inline styles to the required links: Copy code...

Detailed explanation of JavaScript progress management

Table of contents Preface question principle test...

Bootstrap 3.0 study notes for beginners

As the first article of this study note, we will ...

How to install tomcat8 in docker

1. Install tomcat8 with docker 1. Find the tomcat...

Basic learning and experience sharing of MySQL transactions

A transaction is a logical group of operations. E...

How to change the encoding to utf-8 in mysql version 5.7 under windows

Preface I just started learning MySQL and downloa...

Advantages and Problems of XHTML CSS Website Design

XHTML is the standard website design language cur...

How to deploy tomcat in batches with ansible

1.1 Building the Directory Structure This operati...