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 PartThere 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 PartHere are some Vue knowledge points used:
<!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 partconst 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:
|
<<: MySQL 8.0.12 installation graphic tutorial
>>: How to remove carriage return characters from text in Linux
Table of contents 1. Nginx installation and start...
Life cycle classification Each component of vue i...
1. Download the zip installation package Click he...
1. Check whether event is enabled show variables ...
⑴ Content determines form. First enrich the conten...
Web Server 1. The web server turns off unnecessar...
Due to the default bridge network, the IP address...
Installation The required documents are provided ...
Preface In the last issue, we explained LinearLay...
Preface This article uses the new features of MyS...
Install antd-mobile Global import npm install ant...
summary: The following is a method for changing t...
The /partition utilization of a server in IDC is ...
This article example shares the specific code of ...
We all know the drag-and-drop feature of HTML5, w...