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 how to easily switch CSS themes

I recently added a very simple color scheme (them...

Vue realizes the function of uploading photos on PC

This article example shares the specific code of ...

How to separate static and dynamic state by combining Apache with Tomcat

Experimental environment Apache and Tomcat are bo...

Example analysis to fix problems in historical Linux images

Fix for issues with historical Linux images The E...

Use js in html to get the local system time

Copy code The code is as follows: <div id=&quo...

A brief talk about the diff algorithm in Vue

Table of contents Overview Virtual Dom principle ...

Detailed explanation of Docker container network port configuration process

Exposing network ports In fact, there are two par...

Detailed introduction of Chrome developer tools-timeline

1. Overview Users expect the web applications the...

Implementation of MYSQL (telephone number, ID card) data desensitization

1. Data desensitization explanation In daily deve...

How to add fields to a large data table in MySQL

Preface I believe everyone is familiar with addin...

Echarts legend component properties and source code

The legend component is a commonly used component...

MySQL 8.0.23 installation and configuration method graphic tutorial under win10

This article shares the installation and configur...