This article example shares the specific code of Vue to realize the book shopping cart function for your reference. The specific content is as follows RenderingClick to increase, decrease purchase quantity and remove the total price will change Code<!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>Book Shopping Cart</title> <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" 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>Operation</th> </tr> </thead> <tbody> <tr v-for="(item, index) in books"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | showPrice}}</td> <td> <!-- disabled is true when the button is disabled --> <button @click="reduce(index)" v-bind:disabled="item.count <= 1">-</button> {{item.count}} <button @click="increase(index)">+</button> </td> <td><button @click="remove(index)">Remove</button></td> </tr> </tbody> </table> <h2>Total price: {{totalPrice | showPrice}}</h2> </div> <h2 v-else>Shopping cart is empty</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data:{ books: { name: 'Introduction to Algorithms', date: '2021-8-1', price: 85.00, count: 1 }, { name: 'The Art of UNIX Programming', date: '2021-8-2', price: 69.00, count: 1 }, { name: 'Programming Pearls', date: '2021-8-3', price: 35.00, count: 1 }, { name: 'The Art of DOM Programming', date: '2021-8-4', price: 75.00, count: 1 }, { name: 'Nodejs in Simple Terms', date: '2021-8-5', price: 105.00, count: 1 }, ], }, methods:{ reduce(index){ this.books[index].count--; }, increase(index){ this.books[index].count++; }, remove(index){ this.books.splice(index,1); }, }, computed:{ // The method written in the calculated attribute can be used directly as an attribute totalPrice(){ //let totalPrice = 0; // 1. Ordinary for loop // for (let i = 0; i < this.books.length; i++) { // totalPrice += this.books[i].count * this.books[i].price; // } // 2. Ordinary for loop with simpler steps // for (let i in this.books) { // totalPrice += this.books[i].count * this.books[i].price; // } // 3. for(let item of this.books) //for(let item of this.books){ //totalPrice += item.count * item.price; //} //return totalPrice; // 4. High-order function writing reduce // Return the result directly without defining variables or traversing return this.books.reduce(function(pre, book){ return pre + book.price * book.count; },0); }, // Filters:{ showPrice(price){ return "¥" + price.toFixed(2); } } }) </script> </body> </html> 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:
|
<<: How to configure Nginx load balancing
6 solutions for network failure in Docker contain...
Preface Today I encountered a very strange proble...
Index merging is an intelligent algorithm provide...
You may have noticed that the src or CSS backgroun...
Table of contents Initial Vue Building a Vue deve...
I wonder if you have ever thought about this ques...
Table of contents Preface text 1. Concepts relate...
Table of contents Basic Types any type Arrays Tup...
This article example shares the specific code of ...
Table of contents Written in front What exactly i...
1. Background Sysbench is a stress testing tool t...
Mysql slow query explanation The MySQL slow query...
Without further ado, here are the renderings. The...
Table of contents 1. Introduction 2. Interface 3....
Docker has many log plug-ins. The default is to u...