<body>
<H1 align= "center" > Shopping Cart instance <div id= "VM1" >
<table align= "center" width= "border=" 1 "cellpadding=" 0 "cellspacing=" 0 ">
<tr>
<th> Serial Number </th>
<th> Products </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Subtotal </th>
<th> Operations </th>
</tr>
<tr v-for= "(product,index) in Productslist" >
<td>{{number (Index) +1}}</td>
<td>{{product.name}}</td>
<TD class= "Money" >{{product.price}}</td>
<td>
<button v-on:click= "Jian (index)" >-</button>
<input type= "text" v-model= "Product.num" v-on:input= "Change (index)" >
<button v-on:click= "Add (Index)" >+</button>
</td>
<TD class= "Money" >{{product.price*product.num}}</td>
<td><button v-on:click= del (index) > Remove cart </button></td>
</tr>
</table>
<table align= "center" width= "border=" 1 "cellpadding=" 5 "cellspacing=" 0 "style=" margin-top:60px; " >
<tr>
<th> total number of items purchased </th>
<th> Total </th>
</tr>
<tr>
<td>{{Count2 ()}}</td>
<TD class= "Money" >{{Allmoney ()}}</td>
</tr>
</table>
</div>
<script>
var vm1=new Vue ({
El: ' #vm1 ',
data:{
productslist:[
{ID: ' 0 ', Name: ' IPhone 6 Plus ', Price: ' + ', num:1},
{ID: ' 1 ', Name: ' Computer table ', Price: ' + ', num:1},
{ID: ' 2 ', Name: ' Tablet ', Price: ' + ', num:1}
]
},
methods:{
Delete
Del:function (index) {
if (Confirm ("Are you sure you want to delete it?") ")){
This.productsList.splice (index,1);
}
},
Increase
Add:function (index) {
if (this.productslist[index].num<100) {
this.productslist[index].num++;
}
},
Reduce
Jian:function (index) {
if (this.productslist[index].num>1) {
this.productslist[index].num--;
}
},
Modify
Change:function (index) {
if (this.productslist[index].num>100) {
this.productslist[index].num=100;
}else if (this.productslist[index].num<1) {
This.productslist[index].num=1;
}
},
Total quantity
Count2:function () {
var list=this.productslist;
var total=0;
for (Var i=0;i<list.length;i++) {
Total+=parseint (List[i].num);
}
return total;
},
Total Amount
Allmoney:function () {
var list=this.productslist;
var totalmoney=0;
for (Var i=0;i<list.length;i++) {
Totalmoney+=parseint (list[i].num) *list[i].price;
}
return Totalmoney;
}
}
});
</script>
</body>
Vuejs Realization of Shopping cart function