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)
Application software generally has such business ...
wedge Because the MySQL version installed on the ...
In HTML, common URLs are represented in a variety ...
Requirement: Celery is introduced in Django. When...
Good HTML code is the foundation of a beautiful w...
Let's take a look at zabbix monitoring sqlser...
This article mainly introduces 6 solutions to the...
This article example shares the specific code of ...
Table of contents Overview definition Instance Me...
About Nginx, a high-performance, lightweight web ...
1. DOCTYPE is indispensable. The browser determin...
I recently encountered a problem when doing IM, a...
Preface This article mainly introduces how to sta...
The file name of the dynamic library file under L...
MySQL CURDATE Function Introduction If used in a ...