Vue implements a simple shopping cart example

Vue implements a simple shopping cart example

This article shares the specific code of Vue to implement a simple shopping cart for your reference. The specific content is as follows

Let’s take a look at the finished effect first.

CSS Part

There is nothing much to say here, just the knowledge point of v-cloak

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: center;
}
th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
[v-cloak]{
  display: none;
}

HTML Part

Here are some Vue knowledge points used:

  • v-if
  • v-for
  • v-cloak
  • v-on > @
  • v-bind > :
  • methods
  • computed
  • filters
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
  <link rel="stylesheet" href="style.css" >
</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>Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in books">
            <th>{{item.id}}</th>
            <th>{{item.name}}</th>
            <th>{{item.date}}</th>
            <!--Solution 1 retains decimal points and currency symbols-->
            <!-- <th>{{"¥"+item.price.toFixed(2)}}</th> -->
            <!--Solution 2-->
            <!-- <th>{{getFinalPrice(item.price)}}</th> -->
            <!--Scheme 3-->
            <th>{{item.price | showPrice}}</th>
            <th>
              <button @click="decrement(index)" :disabled="item.count<=0">-</button>
              {{item.count}}
              <button @click="increment(index)">+</button>
            </th>
            <th><button @click="removeHandle(index)">Remove</button></th>
          </tr>
        </tbody>
      </table>
      <h2>Total Price:{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>
      Shopping cart is empty</h2>
  </div>

</body>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</html>

JS part

const app = new Vue({
  el:"#app",
  data:{
    books:
      {
        id:1,
        name:"Introduction to Algorithms",
        date:'2006-9',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:"The Art of UNIX Programming",
        date:'2006-2',
        price:50.00,
        count:1
      },
      {
        id:3,
        name:"The Art of Programming",
        date:'2008-10',
        price:39.00,
        count:1
      },
      {
        id:4,
        name:"《Code Encyclopedia》",
        date:'2006-3',
        price:128.00,
        count:1
      },
      
    ]
  },
  methods: {
   //Here we give up using the method form to calculate the total price and use the calculated property instead because it is more efficient.
    // getFinalPrice(price){
    // return "¥"+price.toFixed(2)
    // },
    increment(index){
      this.books[index].count++
    },
    decrement(index){
      this.books[index].count--
    },
    removeHandle(index){
      this.books.splice(index,1);
    }

  },
  computed: {
    totalPrice(){
      // Option 1: Ordinary for loop // let totalPrice = 0;
      // for(let i=0;i<this.books.length;i++){
      // totalPrice += this.books[i].price * this.books[i].count
      // }
      // return totalPrice

      // Solution 2: for in
      // let totalPrice = 0;
      // for(let i in this.books){
      // // console.log(i);//1 2 3 4
      // totalPrice += this.books[i].price * this.books[i].count
      // }
      // return totalPrice

      // Option 3: for of
      // let totalPrice = 0;
      // for(let item of this.books){
      // // console.log(item);//What we get here is each object in the array// totalPrice += item.price * item.count
      // }
      // return totalPrice

      // Solution 4: reduce
      return this.books.reduce(function (preValue, book) {
        // console.log(book); // Output four objects respectively return preValue + book.price * book.count
      }, 0)
    }
  },
  // Filters:{
    showPrice(price){
      return "¥"+price.toFixed(2)
    }
  }
})

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
  • Simple shopping cart function example implemented by vuex
  • Vue realizes shopping cart total price calculation
  • vue+vant-UI framework realizes the checkbox selection and deselection function of the shopping cart
  • Vuejs implements shopping cart function
  • Detailed explanation of the shopping cart function implemented by Vue.js

<<:  MySQL 8.0.12 installation graphic tutorial

>>:  How to remove carriage return characters from text in Linux

Recommend

Detailed explanation of the difference between Vue life cycle

Life cycle classification Each component of vue i...

A brief discussion on MySQL event planning tasks

1. Check whether event is enabled show variables ...

Web design must also first have a comprehensive image positioning of the website

⑴ Content determines form. First enrich the conten...

Security considerations for Windows server management

Web Server 1. The web server turns off unnecessar...

Docker compose custom network to achieve fixed container IP address

Due to the default bridge network, the IP address...

MySQL8 Installer version graphic tutorial

Installation The required documents are provided ...

The use of FrameLayout in six layouts

Preface In the last issue, we explained LinearLay...

Simple usage example of MySQL 8.0 recursive query

Preface This article uses the new features of MyS...

React introduces antd-mobile+postcss to build mobile terminal

Install antd-mobile Global import npm install ant...

Linux disk space release problem summary

The /partition utilization of a server in IDC is ...

Vue3 encapsulates its own paging component

This article example shares the specific code of ...

How to build a drag and drop plugin using vue custom directives

We all know the drag-and-drop feature of HTML5, w...