Vue shopping cart case study

1. Shopping cart example
2. Code Implementation
3. Summary

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: