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

Detailed explanation of TS numeric separators and stricter class attribute checks

Table of contents Overview in operator refinement...

An article tells you how to write a Vue plugin

Table of contents What is a plugin Writing plugin...

MySQL 8.0.20 compressed version installation tutorial with pictures and text

1. MySQL download address; http://ftp.ntu.edu.tw/...

Detailed explanation of real-time backup knowledge points of MySQL database

Preface The need for real-time database backup is...

How to install WSL2 Ubuntu20.04 on Windows 10 and set up the docker environment

Enable WSL Make sure the system is Windows 10 200...

How to add Nginx proxy configuration to allow only internal IP access

location / { index index.jsp; proxy_next_upstream...

Better-scroll realizes the effect of linking menu and content

1. Basic use <!DOCTYPE html> <html lang=...

Top 10 useful and important open source tools in 2019

In Black Duck's 2017 open source survey, 77% ...

Detailed explanation and summary of the URL for database connection

Detailed explanation and summary of the URL for d...

What are mysql dirty pages?

Table of contents Dirty pages (memory pages) Why ...

How to implement Mysql scheduled tasks under Linux

Assumption: The stored procedure is executed ever...

HTML table tag tutorial (23): row border color attribute BORDERCOLORDARK

In rows, dark border colors can be defined indivi...

Summary of three ways to create new elements

First: via text/HTML var txt1="<h1>Tex...

How to delete folders, files, and decompress commands on Linux servers

1. Delete folders Example: rm -rf /usr/java The /...

Detailed explanation of the initial use of Promise in JavaScript asynchronous programming

1. Overview The Promise object is a specification...