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

6 solutions for network failure in Docker container

6 solutions for network failure in Docker contain...

Solution to nginx not jumping to the upstream address

Preface Today I encountered a very strange proble...

How to use mysql index merge

Index merging is an intelligent algorithm provide...

The url value of the src or css background image is the base64 encoded code

You may have noticed that the src or CSS backgroun...

Vue Beginner's Guide: Environment Building and Getting Started

Table of contents Initial Vue Building a Vue deve...

How to avoid data loop conflicts when MySQL is configured with dual masters

I wonder if you have ever thought about this ques...

Summary of js execution context and scope

Table of contents Preface text 1. Concepts relate...

Learn about TypeScript data types in one article

Table of contents Basic Types any type Arrays Tup...

Mini Program to Implement Simple List Function

This article example shares the specific code of ...

Web componentd component internal event callback and pain point analysis

Table of contents Written in front What exactly i...

Summary of Mysql slow query operations

Mysql slow query explanation The MySQL slow query...

CSS3+Bezier curve to achieve scalable input search box effect

Without further ado, here are the renderings. The...

JavaScript Reflection Learning Tips

Table of contents 1. Introduction 2. Interface 3....

Detailed explanation of log processing of Docker containers

Docker has many log plug-ins. The default is to u...