Vue implements a simple shopping cart example

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

HTML Home Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/index.css" >
  
</head>
<body>
  <div id="app">
   <div v-if="books.length != 0">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Book Title</th>
          <th>Published as scheduled</th>
          <th>Price</th>
          <th>Purchase quantity</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price | showPrice}}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td><button @click="removeHandle(index)">Remove</button></td>
        
        </tr>
      </tbody>
    </table>
    <h2>Total price is: {{totalPrice | showPrice}}</h2>
   </div>
   <h2 v-else>Shopping cart is empty</h2>
  </div>
 
  <script src="/js/vue.js"></script>
  <script src="/js/index.js"></script>
</body>
</html>

CSS Code

* {
  margin: 0;
  padding: 0;
}
table {
  margin: 100px 0 0 100px;
  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: black;
  font-weight: 6000 ;
}
 
h2 {
  width: 500px;
  margin-left: 100px;
}
 
button {
  padding: 5px;
}

js code (Vue)

const app = new Vue({
  el:"#app",
  data:{
    books:
      {
        id:1,
        name:'Introduction to Algorithms',
        date:'2019-2',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:'Computer Basics',
        date:'2019-2',
        price:95.00,
        count:1
      },
      {
        id:3,
        name:'C++ Advanced Language',
        date:'2019-2',
        price:89.00,
        count:1
      },
      {
        id:4,
        name:'《Compilation Principles》',
        date:'2019-2',
        price:77.00,
        count:1
      },
    ]
   
  },
  methods:{
    decrement(index){
      this.books[index].count--
    },
    increment(index){
      this.books[index].count++
    },
    removeHandle(index){
      this.books.splice(index,1)
    }
  },
 
  computed:{
    totalPrice(){
      let finalPrice = 0
      for(let i = 0; i < this.books.length; i++){
        finalPrice += this.books[i].price * this.books[i].count
      }
      return finalPrice
    }
  },
 
  filters:
    showPrice(price){
      return '￥' + price.toFixed(2)
    }
  }
})

Operation Results

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
Detailed explanation of how to use Vue to achieve the parabolic ball animation effect in the shopping cart
How to implement shopping cart details page in Vue
Vuejs implements shopping cart function

<<: HTML table tag tutorial (33): cell vertical alignment attribute VALIGN

>>: How to set and get the number of Mysql connections