be based on vue.js Realize shopping cart

Time:2020-5-26

The example of this article is shared for you vue.js To realize the specific code of shopping cart for your reference, the specific content is as follows

template

<template>
<div>
<div>
<span>Shopping cart</span>
</div>
<ul>
<li>
<input type="checkbox" v-model="checkedAll" @change="checkedAllChange()">
<label for="all"></label>
Select all
</li>
<li>Commodity code</li>
<li>Commodity name</li>
<li>Unit price of goods</li>
<li>Quantity of goods</li>
<li>Merchandise inventory</li>
<li>Subtotal of goods</li>
</ul>
<div>
<ul v-for="data in data" :key="data.code">
<li>
<input type="checkbox" name="commodity" v-model="checked" :value="data" @change="changeAll()" >
</li>
<li>{{data.code}}</li>
<li>{{data.name}}</li>
<li>¥{{data.price}}</li>
<li>
<div @click="SubNum(data)">-</div>
<input type="number" v-model.lazy="data.number" @change="numberChange(data)" >
<div @click="AddNum(data)">+</div>
</li>
<li>{{data.stock}}</li>
<li>¥{{data.number*data.price}}</li>
</ul>
</div>
<div>
<p>{{commodity number}} items</p>
<p>Total: < span > ¥ {{numberall}} < / span ></p>
</div>
</div>
</template>

script

<script>
export default {
data() {
return {
checkedAll: false,
checked: [],
totalPrice: 0,
data: {
one: {
code: 10001,
Name: "commodity 1",
price: 26,
number: 1,
stock: 6
},
two: {
code: 10002,
Name: "commodity 2",
price: 34,
number: 1,
stock: 14
},
three: {
code: 10003,
Name: "commodity 3",
price: 48,
number: 1,
stock: 2
},
four: {
code: 10004,
Name: "commodity 4",
price: 63,
number: 1,
stock: 12
},
five: {
code: 10005,
Name: "commodity 5",
price: 50,
number: 1,
stock: 92
}
}
};
},
mounted() {},
methods: {
//Judge all events
checkedAllChange() {
if (this.checkedAll) {
for (let i in this.data) {
this.checked.push(this.data[i]);
}
} else {
this.checked = [];
}
},
changeAll() {
if (this.checked.length == Object.keys(this.data).length) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
},
//Addition and subtraction
SubNum(data) {
data.number--;
if (data.number < 1) {
data.number = 1;
}
},
AddNum(data) {
data.number++;
if (data.number > data.stock) {
data.number = data.stock;
}
},
//Input
numberChange(data) {
if (data.number > data.stock) {
data.number = data.stock;
}
}
},
computed: {
//Quantity of goods
commodityNumber() {
return this.checked.length;
},
//Total price
numberAll() {
var numberAll = 0;
for (let i in this.checked) {
numberAll += this.checked[i].number * this.checked[i].price;
}
return numberAll;
}
}
};
</script>

css


<style lang="scss" scoped type="text/css">
ul,
li {
list-style: none;
}
.all {
width: 800px;
height: 500px;
background: #fff;
border: 1px solid #177ecb;
margin-left: 300px;
.head {
background: #177ecb;
height: 36px;
line-height: 36px;
color: #fff;
padding-left: 15px;
}
.menu {
height: 32px;
width: 100%;
border-bottom: 1px solid #d4d4d4;
padding: 0 15px;
display: flex;
.li {
line-height: 32px;
flex: 1;
border-right: 1px solid #d4d4d4;
text-align: center;
input[type="number"] {
width: 40px;
display: inline-block;
height: 20px;
}
div {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
background: #333;
color: #fff;
line-height: 20px;
text-align: center;
cursor: pointer;
}
div:active {
background: #999;
}
}
.li:nth-of-type(3) {
flex: 2;
}
.li:last-child {
border: 0;
}
}
.menu + div {
height: 350px;
margin-bottom: 20px;
border-bottom: 1px solid #177ecb;
}
.info {
text-align: right;
margin-right: 20px;
span {
color: #f00;
font-size: 20px;
font-weight: 900;
}
}
}
</style>

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

Api: tiktok: user video list

Tiktok tiktok, tiktok, tiktok, Api, Api, jitter, voice, bullet screen comments, jitter, jitter, and jitter. Tiktok tiktok tiktok data, jitter data acquisition, live broadcast of shaking sound Titodata: professional short video data acquisition and processing platform. For more information, please contact:TiToData Massive data collection Collect 500 million pieces of data for customers every day Tiktok […]