Vue implements a shopping cart that can change the shopping quantity
|
This article shares with you how to use Vue to change the shopping cart quantity for your reference. The specific content is as follows Effect picture:
Knowledge points: 1. Computed properties Implementation 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>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
}
td,
th {
padding: 8px 16px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
}
</style>
<body>
<div id="box">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>Book Name</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>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | toprice}}</td>
<td>
<button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
<button @click='add(index)'>+</button>
</td>
<td>
<button @click="remove(index)">Remove</button>
</td>
</tr>
</tbody>
</table>
<h2>Total price: {{getallprice | toprice}}</h2>
</div>
<h2 v-else>You have no shopping information</h2>
</div>
<script>
const vm = new Vue({
el: "#box",
data: {
books: [{
id: 1,
name: "《vue.js actual combat》",
date: "2010.2.4",
price: 82.00,
Aunt: 1
}, {
id: 2,
name: "Javascript Practice",
date: "2010.2.4",
price: 108.00,
Aunt: 1
}, {
id: 3,
name: "《html+css practice》",
date: "2010.2.4",
price: 42.50,
Aunt: 1
}, {
id: 4,
name: "Axios Practice",
date: "2010.2.4",
price: 82.00,
Aunt: 1
}, {
id: 5,
name: "jquery practice",
date: "2010.2.4",
price: 65.20,
Aunt: 1
}, ]
},
methods: {
add(index) {
this.books[index].aunt++;
},
down(index) {
this.books[index].aunt--;
},
remove(index) {
this.books.splice(index, 1)
},
},
computed: {
getallprice() {
let all = 0;
for (let i = 0; i < this.books.length; i++) {
all += this.books[i].price * this.books[i].aunt
}
return all
}
},
filters:
toprice(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:
|
<<: Detailed explanation of the role and working principle of MySQL master-slave replication
>>: VMwarea virtual machine installation win7 operating system tutorial diagram
Recommend
How to change password in MySQL 5.7.18
How to change the password in MySQL 5.7.18: 1. Fi...
Analysis of the Docker image construction principle (you can build an image without installing Docker)
Building an image is a very important process in ...
Common shell script commands and related knowledge under Linux
Table of contents 1. Some points to remember 1. V...
Hello dialog box design experience sharing
"What's wrong?" Unless you are accus...
Detailed explanation of inline elements and block-level elements in commonly used HTML tags
Block element HTML tag classification details * a...
Detailed explanation of how to detect and prevent JavaScript infinite loops
Table of contents Preface Fix infinite loop in fo...
Summary of some tips for bypassing nodejs code execution
Table of contents 1. child_process 2. Command exe...
Use pure CSS to achieve switch effect
First is the idea We use the <input type="...
Pessimistic locking and optimistic locking in MySQL
In relational databases, pessimistic locking and ...
C# implements MySQL command line backup and recovery
There are many tools available for backing up MyS...
Tutorial on installing Ubuntu 20.04 and NVIDIA drivers
Install Ubuntu 20.04 Install NVIDIA drivers Confi...
JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain
Table of contents JS Three Mountains Synchronous ...
How to use Volume to transfer files between host and Docker container
I have previously written an article about file t...
HTML basic summary recommendation (text format)
HTML text formatting tags 標簽 描述 <b> 定義粗體文本 ...
js to implement web calculator
How to make a simple web calculator using HTML, C...