A simple way to implement all functions of shopping cart in Vue
The main functions are as follows:
The effect diagram is as follows:
Since there are many functions, we will not talk about them one by one. Let's first talk about the logic of several main functions (add, delete, modify, and query), and finally put all the code. First, let’s look at adding product features //First, let's bind a button to display the event. After clicking Add, a pop-up window will appear <button type="button" @click="xian">Add</button>
//return defines a dis default value of false
xian() {
if (!this.dis == false) {
this.dis = false
} else {
this.dis = true
}
},
Then click Confirm Change in the pop-up window and bind an event to add the product information.
<button type="button" @click="tian">Confirm to add</button>
//Push the product information to be added to a new array and close the pop-up window after adding tian() {
if (this.name == "" || this.county == "" || this.price == "") {
alert("Product information cannot be empty!")
return false
} else {
this.shopPings.push({
name: this.name,
counrty: this.counrty,
price: this.price,
count: this.count,
})
}
this.name = "",
this.counrty = "",
this.price = "",
this.count = ""
this.dis = false
},
After adding the product, I suddenly found that the product information was written incorrectly! ! ? ? Don't panic, let me show you how to modify the function As usual, first define a button to bind the display event, and then bind the display event. Except for the event name, it is the same as adding it above. Let's look at the confirmation modification function directly.
//Define button binding event <button type="button" @click="xiugai">Confirm modification</button>
//Modify the product information in the shopping cart and close the pop-up window after the modification. xiugai() {
console.log(this.int)
let index = this.int
console.log(this.name, this.price, this.count, )
this.shopPings[index].name = this.name
this.shopPings[index].price = this.price
this.shopPings[index].county = this.county
this.shopPings[index].count = this.count
this.dis1 = false
},
After adding modifications, let's write a deletion Define a button binding event, pass in an index value, and finally splice deletes an item based on the index.
Define a button binding event, pass in an index value, and finally splice deletes an item according to the subscript <button @click="del(index)">Delete</button>
del(index) {
this.shopPings.splice(index, 1);
},
Clearing the shopping cart is relatively simple. Just set the array to empty after clicking the button.
alldel() {
this.shopPings = []
},
Finally, let’s take a look at the query function in the shopping cart //Set the input value in return //Define an input box, bind the value, set the enter keyboard event and bind the search event <input type="text" placeholder="Please enter the name of the product to be queried" v-model="input_value" @keyup.13="search"> See the notes for details
//First, let's make a judgment. When the search box is empty, there will be a prompt message that it is not allowed to be empty. //Then get the name of each item in the array for search. If there is no such product name, it will prompt that there is no such product. //Finally, filter the array filter and find the corresponding product by comparing the product name entered in the search box with the product name in the shopping cart. search() {
if (!this.input_value) {
return alert('Please enter content')
}
if (
this.shopPings.every((v) => {
v.name.indexOf(this.input_value) == -1
})
) {
this.input_value = ''
return alert('No such product')
}
this.shopPings = this.shopPings.filter((v) => {
v.name.replace(this.input_value, this.input_value)
return v.name.indexOf(this.input_value) != -1
})
}
Full code:
<template>
<div class="shopCar">
<header>
<button type="button" @click="delSelect">Batch delete</button>
<button type="button" @click="alldel">Clear shopping cart</button>
<button type="button" @click="xian">Add</button>
<button type="button" @click="jiang">Sort</button>
<input type="text" placeholder="Please enter the name of the product you want to search" v-model="input_value" @keyup.13="search">
<div class="xiu" v-show="dis1">
<input type="text" placeholder="Name" v-model="name">
<input type="text" placeholder="Price" v-model="price">
<input type="text" placeholder="Quantity" v-model="count">
<input type="text" placeholder="Origin" v-model="county">
<button type="button" @click="xiugai">Confirm changes</button>
</div>
<div class="add" v-show="dis">
<input type="text" placeholder="Name" v-model="name">
<input type="text" placeholder="Price" v-model="price">
<input type="text" placeholder="Quantity" v-model="count">
<input type="text" placeholder="Origin" v-model="county">
<button type="button" @click="tian">Confirm to add</button>
</div>
</header>
<main>
<ul>
<li>
<p><input type="checkbox" v-model="allChecked">
Select All</p>
<p>Name</p>
<p>Origin</p>
<p>Quantity</p>
<p>Unit price</p>
<p>Subtotal</p>
<p>Operation</p>
</li>
<li v-for="(item,index) in shopPings" :key="index">
<p><input type="checkbox" v-model="item.checked">{{item.id}}</p>
<p>{{item.name}}</p>
<p>{{item.counrty}}</p>
<p><button type="button" @click="add(item)">+</button>
<input type="text" v-model="item.count" style="width:20px">
<button type="button" @click="remove(item)">-</button>
</p>
<p>{{item.price}}</p>
<p>{{item.price*item.count |suffix}}</p>
<p>
<button type="button" @click="xiu(index)"> Modify</button>
<button @click="del(index)">Delete</button>
</p>
</li>
</ul>
</main>
<footer>
<p>Total {{state.sum |suffix}}</p>
</footer>
</div>
</template>
<style scoped lang="scss">
.shopCar {
width: 1000px;
border: 2px solid black;
margin: 100px auto;
overflow:auto;
header {
display: flex;
justify-content: space-between;
width: 600px;
height: 27px;
overflow: hidden;
.add {
width: 400px;
background: #e4e1e1;
position: absolute;
left: 39%;
top: 40%;
input {
display: block;
margin: 20px auto;
}
button {
display: block;
margin: 0 auto;
}
}
.xiu {
width: 400px;
background: #e4e1e1;
position: absolute;
left: 39%;
top: 40%;
input {
display: block;
margin: 20px auto;
}
button {
display: block;
margin: 0 auto;
}
}
}
main {
// height: 400px;
margin-top: 10px;
ul {
li {
height: 78px;
border-bottom: 2px solid black;
display: flex;
justify-content: space-between;
p {
float: left;
width: 140px;
height: 27px;
border: 2px solid black;
text-align: center;
}
}
}
}
footer {
height: 50px;
margin-top: 13px;
line-height: 50px;
}
}
</style>
<script>
const shopData = [{
id: "",
name: "shoes",
counrty: "Shanxi",
count: 1,
price: 800,
},
{
id: "",
name: "Cabinet",
counrty: "Beijing",
count: 1,
price: 3200,
},
{
id: "",
name: "Lipstick",
counrty: "Hebei",
count: 2,
price: 200,
},
{
id: "",
name: "Hamburger",
counrty: "Henan",
count: 2,
price: 200,
},
]
export default {
//Filters: {
suffix(value) {
let price = Number(value)
return `￥${price.toFixed(2)}`
//Insert a ￥ symbol before the amount and define the decimal point as two digits}
},
computed: {
//Select all allChecked: {
get() {
const checkeds = this.shopPings.filter((item) => item.checked)
return checkeds.length === this.shopPings.length
},
set(state) {
// console.log(state)
this.shopPings.map((item) => {
item.checked = state
return item
})
}
},
//Subtotal calculation totalPrice: function () {
var total = 0;
for (var i = 0; i < this.checkList.length; i++) {
var item = this.checkList[i];
total += item.price * item.count;
}
return total.toLocaleString();
},
//Calculate the total price of the selected item state() {
const checkeds = this.shopPings.filter((item) => item.checked)
const checked = checkeds.length === this.shopPings.length
const sum = checkeds.reduce((a, b) => {
return a + b.count * b.price;
}, 0)
return {
count: checkeds.length,
sum
}
},
},
data() {
return {
shopPings: [],
dis: false, //Confirm submission dis1: false, //Confirm modification id: "",
name: "", //name price: "", //unit price count: "", //quantity counrty: "", //origin input_value: "", //value entered in the query box}
},
mounted() {
window.fetch("/").then(() => {
this.shopPings = shopData.map((item) => {
item.checked = false
return item
})
})
},
methods: {
//Add product xian() {
if (!this.dis == false) {
this.dis = false
} else {
this.dis = true
}
},
//Confirm adding tian() {
if (this.name == "" || this.county == "" || this.price == "") {
alert("Product information cannot be empty!")
return false
} else {
this.shopPings.push({
name: this.name,
counrty: this.counrty,
price: this.price,
count: this.count,
})
}
this.name = "",
this.counrty = "",
this.price = "",
this.count = ""
this.dis = false
},
//Delete product del(index) {
this.shopPings.splice(index, 1);
},
//Delete the selected item delSelect() {
this.shopPings = this.shopPings.filter((item) => {
if (!item.checked) {
return item
}
})
},
//delete all alldel() {
this.shopPings = []
},
//Reduce purchase remove(data) {
if (data.count > 0) {
data.count--
}
if (data.count === 0) {
data.checked = false
}
},
//Add purchase add(data) {
data.count++
},
//Modify product xiu(i) {
this.int = i
if (!this.dis1 == false) {
this.dis1 = false
} else {
this.dis1 = true
}
},
// Confirm the modification xiugai() {
console.log(this.int)
let index = this.int
console.log(this.name, this.price, this.count, )
this.shopPings[index].name = this.name
this.shopPings[index].price = this.price
this.shopPings[index].county = this.county
this.shopPings[index].count = this.count
this.dis1 = false
},
//Descending orderjiang() {
this.shopPings.sort((a, b) => {
// Sort based on data return a.price - b.price;
})
},
search() {
if (!this.input_value) {
return alert('Please enter content')
}
if (
this.shopPings.every((v) => {
v.name.indexOf(this.input_value) == -1
})
) {
this.input_value = ''
return alert('No such product')
}
this.shopPings = this.shopPings.filter((v) => {
v.name.replace(this.input_value, this.input_value)
return v.name.indexOf(this.input_value) != -1
})
}
}
}
</script>
SummarizeThis is the end of this article about how to use vue to implement all the functions of a shopping cart. For more information about how to use vue to implement shopping cart functions, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: mysql installer community 8.0.16.0 installation and configuration graphic tutorial
>>: How to run .sh files in Linux system
Recommend
Example of adding and deleting range partitions in MySQL 5.5
introduce RANGE partitioning is based on a given ...
How to install MySQL database on Ubuntu
Ubuntu is a free and open source desktop PC opera...
CentOS installation mysql5.7 detailed tutorial
This article shares the detailed steps of install...
Specific usage of textarea's disabled and readonly attributes
disabled definition and usage The disabled attrib...
Detailed explanation of the this pointing problem in JavaScript
Summarize Global environment ➡️ window Normal fun...
How to write HTML head in mobile device web development
Copy code The code is as follows: <head> &l...
Detailed analysis of replication in Mysql
1.MySQL replication concept It means transferring...
5 ways to determine whether an object is an empty object in JS
1. Convert the json object into a json string, an...
Node script realizes automatic sign-in and lottery function
Table of contents 1. Introduction 2. Preparation ...
Detailed graphic and text instructions for installing MySQL 5.7.20 on Mac OS
Installing MySQL 5.7 from TAR.GZ on Mac OS X Comp...
JavaScript implements simple date effects
The specific code of JavaScript date effects is f...
A detailed guide to custom directives in Vue
Table of contents 1. What is a custom instruction...
MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)
Installation environment: CentOS7 64-bit, MySQL5....
How to use css overflow: hidden (overflow hiding and clearing floats)
Overflow Hide It means hiding text or image infor...
How to use regular expressions to automatically match wildcard domain names in nginx
Nginx uses regular expressions to automatically m...