Vue shopping cart case study

Vue shopping cart case study

1. Shopping cart example

After a series of studies, let's practice a shopping cart case here.

Requirements: Use vue to write a form page with the purchase quantity on the page. Click the + or - button to increase or decrease the number of shopping carts. The minimum quantity must not be less than 0. Click the remove button to remove the product. When all products are removed, the form on the page disappears.

Then the text appears: Shopping cart is empty. Below the form is the total price of the goods, which increases as the number of goods increases. The default is 0 yuan.

The overall effect is as follows:

2. Code Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
  <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">
  <div v-if="books.length">
    <table>
      <thread>
        <tr>
          <th></th>
          <th>Book Title</th>
          <th>Publication Date</th>
          <th>Price</th>
          <th>Purchase quantity</th>
          <th>Operation</th>
        </tr>
      </thread>
      <tbody>
      <tr v-for="(book, index) in books" :key="book">
        <td>{{index+1}}</td>
        <td>{{book.name}}</td>
        <td>{{book.publish_date}}</td>
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrease(index)" :disabled="book.count <= 0">-</button>
          {{book.count}}
          <button @click="increase(index)">+</button>
        </td>
        <td>
          <button @click="removeClick(index)">Remove</button>
        </td>
      </tr>
      </tbody>
    </table>
    <p>Total price: {{totalPrice | showPrice}}</p>
  </div>
  <h2 v-else>Shopping cart is empty</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      books:
        {"name":"Introduction to Algorithms", "publish_date":"2006-9", "price":20.00, "count": 0},
        {"name":"The Art of UNIX Programming", "publish_date":"2006-2", "price":30.00, "count": 0},
        {"name":"Programming Technology", "publish_date":"2008-10", "price":40.00, "count": 0},
        {"name":"Code Collection", "publish_date":"2006-3", "price":50.00, "count": 0},
      ],
    },
    methods: {
      // Increase +
      decrease(index){
        this.books[index].count-=1
      },
      // reduce-
      increase(index){
        this.books[index].count+=1
      },
      //Remove button removeClick(index){
        this.books.splice(index, 1)
      }
    },
    computed: {
      // Calculate the total price totalPrice(){
        let totalPrice = 0
        for (let item of this.books){
          totalPrice += item.price * item.count
        }
        return totalPrice
      }
    },
    // Filters to filter prices to 2 decimal places filters: {
      showPrice(price){
        return '¥' + price.toFixed(2)
      }
    }
  })
</script>
</body>
</html>

3. Summary

v-for: loop, loop books list
v-on: event monitoring, monitoring click events
disabled: The attribute of whether the button is clickable. If it is True , it is clickable, and if it is False , it is not clickable. Add judgment conditions: disabled="book.count <= 0" When the number of shopping carts ≤0 , it cannot be clicked
v-if and v-else: conditional judgment, judge the length of the books list, if there is a length, display the list, if the length is 0, display the text shopping cart empty
Filters: Custom filter, filter the price, so that the price has 2 decimal places after filtering
computed: computed property, calculate the total price of the purchase

This is the end of this article about Vue shopping cart case practice. For more relevant Vue shopping cart practice content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • A small exercise to implement shopping cart in Vue

<<:  Details of various font formats in HTML web pages

>>:  Introduction to CSS foreground and background automatic color matching technology (demo)

Recommend

A simple way to restart QT application in embedded Linux (based on QT4.8 qws)

Application software generally has such business ...

MySQL 5.7.30 Installation and Upgrade Issues Detailed Tutorial

wedge Because the MySQL version installed on the ...

URL representation in HTML web pages

In HTML, common URLs are represented in a variety ...

Learn how to write neat and standard HTML tags

Good HTML code is the foundation of a beautiful w...

Detailed explanation of the process of zabbix monitoring sqlserver

Let's take a look at zabbix monitoring sqlser...

6 solutions to IDEA's inability to connect to the MySQL database

This article mainly introduces 6 solutions to the...

JavaScript to implement login slider verification

This article example shares the specific code of ...

A brief discussion on JS packaging objects

Table of contents Overview definition Instance Me...

Implementation example of nginx access control

About Nginx, a high-performance, lightweight web ...

Summary of several principles that should be followed in HTML page output

1. DOCTYPE is indispensable. The browser determin...

Detailed explanation of count(), group by, order by in MySQL

I recently encountered a problem when doing IM, a...

How to start a transaction in MySQL

Preface This article mainly introduces how to sta...

Detailed explanation of Linux dynamic library generation and usage guide

The file name of the dynamic library file under L...

Detailed Example of MySQL curdate() Function

MySQL CURDATE Function Introduction If used in a ...