Home > Article > Web Front-end > How to implement shopping cart function in Vuejs
How to implement shopping cart function in Vuejs
- php中世界最好的语言Original
- 2018-05-24 09:20:213309browse
This time I will show you how Vuejs implements the shopping cart function. What are the precautions for Vuejs to implement the shopping cart function. The following is a practical case, let's take a look.
Start updating blogs related to the front-end framework Vue.JS.
Functional Overview
I have learned some basic knowledge of Vue.JS, and now use these basic knowledge of instructions and data binding to develop a simple shopping cart function. The key points of the functions are as follows:
(1) Display the name, unit price and quantity of the product;
(2) The quantity of the product can be increased and decreased;
(3) The total price of the shopping cart must be updated in real time, that is, the quantity If there is a change, the total price will also change accordingly;
(4) The product can be removed from the shopping cart;
(5) It has a selection function and only calculates the total price of the selected product.
Code
The code is divided into three parts, namely HTML, JS, and css. The key is HTML and JS.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 购物车</title>
<script src="../js/vue.min.js"></script>
<link href="../css/cart.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<p id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList" ></td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
{{ item.count }}
<button @click="handleAdd(index)">+</button>
</td>
<td><button @click="handleRemove(index)">移除</button></td>
</tr>
</tbody>
</table>
<p>总价：￥ {{ totalPrice }}</p>
</template>
<p v-else>购物车为空！</p>
</p>
<script src="../js/cart.js"></script>
</body>
</html>
JS
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iPhone 8',
price:8888,
count:1
},
{
id:2,
name:'Huwei Mate10',
price:6666,
count:1
},
{
id:3,
name:'Lenovo',
price:6588,
count:1
}
],
selectList:[],
checked:false
},
computed:{
totalPrice:function(){
var total = 0;
for(var i = 0,len = this.selectList.length;i < len;i++){
var index = this.selectList[i];
var item = this.list[index];
if(item){
total += item.price * item.count;
}
else{
continue;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function(index){
var item = this.list[index];
if(item.count < 2){
return;
}
item.count--;
},
handleAdd:function(index){
var item = this.list[index];
item.count++;
},
handleRemove:function(index){
this.list.splice(index,1);
},
swapCheck:function(){
var selectList = document.getElementsByName('selectList');
var len = selectList.length;
if(this.checked){
for(var i = 0;i < len;i++){
var item = selectList[i];
item.checked = false;
}
this.checked = false;
this.selectList = [];
}
else{
for(i = 0;i < len;i++){
item = selectList[i];
if(item.checked === false){
item.checked = true;
this.selectList.push(selectList[i].value);
}
}
this.checked = true;
}
}
}
});
CSS
[v-cloak]{
display: none;
}
table{
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border:1px solid black;
text-align: center;
}
th{
background-color: gray;
}
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
The above is the detailed content of How to implement shopping cart function in Vuejs. For more information, please follow other related articles on the PHP Chinese website!