Vue. JS Realization Shopping Cart function

Shopping cart is a necessary function of e-commerce, can let users buy multiple products at one time, the common shopping cart implementation methods are as follows:

1. After the user updates the item in the shopping cart, the page refreshes automatically.

2. Using the local refresh function, the server side returns the entire shopping cart page html

3. Server-side return JSON format, using template engine +dom Operation Update page

Recently learned Vue.js, a lightweight MVVM (Model-view-viewmodel), Vue.js is data driven without the need to manipulate the DOM, which provides a special HTML language that binds the DOM and data together, and once the data has been modified, the DOM will automatically update the update.

For vue.js study, please refer to "vue.js--60 minute Quick Start" This article or go to the official website https://cn.vuejs.org/study.

The following is the implementation of the shopping cart with Vue.js.

The first step defines the view:

<div class= "Con" >

<table class= "Table" >
<tr>
<th> Serial Number </th>
<th> Products </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Subtotal </th>
<th> Operations </th>
</tr>
&LT;TR v-for= "x in Goods_list" >
<td>{{x.id}}</td>
<td>{{x.name}}</td>
&LT;TD class= "Price" >￥{{x.price}}</td>
<td>
<input type= "button" value= "-" class= "Add" v-on:click= "Jian (x)" >
<input type= "text": value= "x.num" class= "num num2" data-max= "5" v-on:input= "ChangeNumber ($event, x)" >
<input type= "button" value= "+" class= "sub" v-on:click= "Jia (x)" >
</td>
&LT;TD class= "Tprice price1" >￥{{x.price * x.num}}</td>
<td><input type= "button" value= "Remove cart" class= "del" v-on:click= "Remove (x)" ></td>
</tr>

</table>
<table>
<tr>
<th> total number of items purchased </th>
<th> Total </th>
</tr>
<tr>
&LT;TD class= "Tnum" >{{count}}</td>
&LT;TD class= "Sumprice" >￥{{total}} Meta </td>
</tr>
</table>
</div>

The item's Total Price field is calculated using Automatic, {{Goods.price * Goods.num}}

The view uses the template syntax, if the shopping cart has a product display product information, otherwise it will show "Shopping cart is empty", the syntax is relatively simple, we look at the understanding.

The second step defines the model:

var model = {        Goods_list: [{name: "Test Item 1", Num:1, price:10.0},                    {name: "Test Item 2", Num:2, price:20.0},                    {NA Me: "Test Item 3", Num:3, price:30.0},                    {name: "Test Item 4", Num:4, price:40.0}                    ]    };
The third step is to initialize the Vue object with the view and model bindings

New Vue ({        el: ". Con",        Data:model    });
See the results:

To calculate a property:

Some students should ask questions, view we used the count and total 2 variables, can not be in the model of these 2 variables ah, the effect is empty ah, do not worry, do not hurry, these 2 values we have to use Vue automatic calculation function.

Modify the next initialization of the Vue code section

var table=new Vue ({
El: ". Con",
Data:{goods_list},
methods:{
Trigger when changing the value of input
Changenumber:function (event,x) {
var obj=$ (Event.target);
X.num = parseint (Obj.val ());
},
Delete
Remove:function (x) {
if (Confirm ("Are you sure you want to delete it?") ")){
Goods_list.splice (x, 1);
}else{
return false;
}

},
Add
Jia:function (x) {
if (X.num>=x.max) {
X.num=x.max
}else{
X.num+=1;
}
},
Reducing
Jian:function (x) {
if (x.num==1) {
X.num==1
}else{
X.num-=1;
}
}
},
computed:{
Count:function () {
var num = 0;
for (var i in this.goods_list) {
num + = parseint (this.goods_list[i].num);
}
return num;
},
Total:function () {
var total = 0;
for (var i in this.goods_list) {
Total + = This.goods_list[i].price * This.goods_list[i].num;
}
return total;
}
},

})

Binding events

In the shopping cart, the user modifies the item quantity, removes the product, and so on, we increase the number of changes and delete the event.

The first step is to modify the view to add event bindings:

<TR v-for= "x in Goods_list" >
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<TD class= "Price" >￥{{x.price}}</td>
<td>
<input type= "button" value= "-" class= "Add" v-on:click= "Jian (x)" >
<input type= "text": value= "x.num" class= "num num2" data-max= "5" v-on:input= "ChangeNumber ($event, x)" >
<input type= "button" value= "+" class= "sub" v-on:click= "Jia (x)" >
</td>
<TD class= "Tprice price1" >￥{{x.price * x.num}}</td>
<td><input type= "button" value= "Remove cart" class= "del" v-on:click= "Remove (x)" ></td>
</tr>

Here the binding event with v-on: The way the event name, of course, you can also use shorthand, "@ event name", such as @click, @blur, etc., but razor template will be the @ event to identify as a variable, so here is the full name.

"ChangeNumber (goods, $event)", we want to get the value of input that is the native DOM object, so we need to pass the event, but with a special variable $event.

The second step of Vue initialization adds the methods property:

methods:{
Trigger when changing the value of input
Changenumber:function (event,x) {
var obj=$ (Event.target);
X.num = parseint (Obj.val ());
},
Delete
Remove:function (x) {
if (Confirm ("Are you sure you want to delete it?") ")){
Goods_list.splice (x, 1);
}else{
return false;
}

},

This is the basic function of our shopping cart is finished, if the shopping cart page to add items to the shopping cart only need to add objects to the model.goods_list.

And then with the AJAX call daemon to persist the shopping cart product information is OK, this part of the code is not posted up, you can do it yourself.

Category: Css3,html5,vue

Vue. JS Realization Shopping Cart function