1. Shopping cart exampleAfter a series of studies, let's practice a shopping cart case here.
The overall effect is as follows: 2. Code Implementation<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <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"> <div v-if="books.length"> <table> <thread> <tr> <th></th> <th>Book Title</th> <th>Publication Date</th> <th>Price</th> <th>Purchase quantity</th> <th>Operation</th> </tr> </thread> <tbody> <tr v-for="(book, index) in books" :key="book"> <td>{{index+1}}</td> <td>{{book.name}}</td> <td>{{book.publish_date}}</td> <td>{{book.price | showPrice}}</td> <td> <button @click="decrease(index)" :disabled="book.count <= 0">-</button> {{book.count}} <button @click="increase(index)">+</button> </td> <td> <button @click="removeClick(index)">Remove</button> </td> </tr> </tbody> </table> <p>Total price: {{totalPrice | showPrice}}</p> </div> <h2 v-else>Shopping cart is empty</h2> </div> <script> const app = new Vue({ el: "#app", data: { books: {"name":"Introduction to Algorithms", "publish_date":"2006-9", "price":20.00, "count": 0}, {"name":"The Art of UNIX Programming", "publish_date":"2006-2", "price":30.00, "count": 0}, {"name":"Programming Technology", "publish_date":"2008-10", "price":40.00, "count": 0}, {"name":"Code Collection", "publish_date":"2006-3", "price":50.00, "count": 0}, ], }, methods: { // Increase + decrease(index){ this.books[index].count-=1 }, // reduce- increase(index){ this.books[index].count+=1 }, //Remove button removeClick(index){ this.books.splice(index, 1) } }, computed: { // Calculate the total price totalPrice(){ let totalPrice = 0 for (let item of this.books){ totalPrice += item.price * item.count } return totalPrice } }, // Filters to filter prices to 2 decimal places filters: { showPrice(price){ return '¥' + price.toFixed(2) } } }) </script> </body> </html> 3. Summary v-for: loop, loop This is the end of this article about Vue shopping cart case practice. For more relevant Vue shopping cart practice content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Details of various font formats in HTML web pages
>>: Introduction to CSS foreground and background automatic color matching technology (demo)
Table of contents Overview in operator refinement...
Table of contents What is a plugin Writing plugin...
1. MySQL download address; http://ftp.ntu.edu.tw/...
Preface The need for real-time database backup is...
Enable WSL Make sure the system is Windows 10 200...
location / { index index.jsp; proxy_next_upstream...
1. Basic use <!DOCTYPE html> <html lang=...
In Black Duck's 2017 open source survey, 77% ...
Detailed explanation and summary of the URL for d...
Table of contents Dirty pages (memory pages) Why ...
Assumption: The stored procedure is executed ever...
In rows, dark border colors can be defined indivi...
First: via text/HTML var txt1="<h1>Tex...
1. Delete folders Example: rm -rf /usr/java The /...
1. Overview The Promise object is a specification...