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
MySQL 5.7.21 winx64 free installation version con...
Table of contents 1. Phenomenon 2. Solution 3. Su...
I recently added a very simple color scheme (them...
This article example shares the specific code of ...
Experimental environment Apache and Tomcat are bo...
Fix for issues with historical Linux images The E...
Copy code The code is as follows: <div id=&quo...
Table of contents Overview Virtual Dom principle ...
Exposing network ports In fact, there are two par...
1. Overview Users expect the web applications the...
1. Data desensitization explanation In daily deve...
We all know that Jmeter provides native result vi...
Preface I believe everyone is familiar with addin...
The legend component is a commonly used component...
This article shares the installation and configur...