VUE.JS实现购物车功能

送分小仙女□ 提交于 2020-01-19 13:23:34

 

购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种:

1. 用户更新购物车里的商品后,页面自动刷新。

2. 使用局部刷新功能,服务器端返回整个购物车的页面html

3. 服务器端返回JSON格式,使用模板引擎+dom操作更新页面

最近新学习了vue.js,一个轻量级的mvvm(Model-View-ViewModel),vue.js是数据驱动无须操作dom,它提供特殊的html语言,把dom和数据绑定在一起,一旦修改了数据,dom将会自动更新更新。

关于vue.js的学习,请参考《Vue.js——60分钟快速入门》这篇文章或者去官网 https://cn.vuejs.org/ 学习。

下面就是用vue.js实现购物车。

第一步 定义view:

<div class="con">
<h1>购物车程序</h1>

<table class="table">
<tr>
<th>序号</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<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="移除购物车" class="del" v-on:click="remove(x)"></td>
</tr>

</table>
<table>
<tr>
<th>购买商品总数量</th>
<th>总价</th>
</tr>
<tr>
<td class="tnum">{{count}}</td>
<td class="sumprice">¥{{total}}元</td>
</tr>
</table>
</div>

商品的总价栏位 使用自动计算,{{ goods.price * goods.num}} 

view里使用了template语法,如果购物车里有商品则显示商品信息,否则就显示“购物车为空”,语法比较简单,大家看一下就明白了。

第二步 定义model:

 var model = {
        goods_list: [{name : "测试商品1",num : 1, price : 10.0},
                    {name : "测试商品2",num : 2, price : 20.0},
                    {name : "测试商品3",num : 3, price : 30.0},
                    {name: "测试商品4", num: 4, price: 40.0 }
                    ]
    };第三步 将view和model绑定一起,初始化Vue对象
 new Vue({
        el: ".con",
        data : model
    });效果见下图:

计算属性:

有同学该提出疑问了,view我们用了count和total这2个变量,可model里没有这2个变量啊,效果也是空的啊,别急别急,这2个值咱要用vue自动计算功能。

修改下初始化Vue代码部分

var table=new Vue({
el:".con",
data:{goods_list},
methods:{
//改变input的值的时候触发
changeNumber: function(event,x){
var obj=$(event.target);
x.num = parseInt(obj.val());
},
//删除
remove: function (x) {
if(confirm("您确定要删除吗?")){
goods_list.splice(x, 1);
}else{
return false;
}

},
//加
jia:function(x){
if(x.num>=x.max){
x.num=x.max
}else{
x.num+=1; 
}
},
//减
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;
}
},


})

绑定事件

购物车里用户会修改商品数量、移除商品等操作,这里我们就增加修改数量和删除事件。

第一步 修改view,增加事件绑定:

<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="移除购物车" class="del" v-on:click="remove(x)"></td>
</tr>

这里绑定事件用了v-on:事件名的方式,当然也可以用简写即“@事件名”,比如@click、@blur等等,不过Razor模版会把@事件识别为变量,所以这里还是用全名。

“changeNumber(goods,$event)”,我们要获取input的值也就是原生dom对象,所以需要传递event,不过要用特殊变量$event。

第二步 Vue初始化增加methods属性:

methods:{
//改变input的值的时候触发
changeNumber: function(event,x){
var obj=$(event.target);
x.num = parseInt(obj.val());
},
//删除
remove: function (x) {
if(confirm("您确定要删除吗?")){
goods_list.splice(x, 1);
}else{
return false;
}

},

至此我们的购物车基本功能就完成了,如果在购物车页面添加商品到购物车里只需要往model.goods_list里增加对象即可。

再配合Ajax调用后台程序持久化购物车里的商品信息就OK了,这部分代码就不贴上来了,大家可以自行实现。


 
分类: css3,html5,vue

购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种:

1. 用户更新购物车里的商品后,页面自动刷新。

2. 使用局部刷新功能,服务器端返回整个购物车的页面html

3. 服务器端返回JSON格式,使用模板引擎+dom操作更新页面

最近新学习了vue.js,一个轻量级的mvvm(Model-View-ViewModel),vue.js是数据驱动无须操作dom,它提供特殊的html语言,把dom和数据绑定在一起,一旦修改了数据,dom将会自动更新更新。

关于vue.js的学习,请参考《Vue.js——60分钟快速入门》这篇文章或者去官网 https://cn.vuejs.org/ 学习。

下面就是用vue.js实现购物车。

第一步 定义view:

<div class="con">
<h1>购物车程序</h1>

<table class="table">
<tr>
<th>序号</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<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="移除购物车" class="del" v-on:click="remove(x)"></td>
</tr>

</table>
<table>
<tr>
<th>购买商品总数量</th>
<th>总价</th>
</tr>
<tr>
<td class="tnum">{{count}}</td>
<td class="sumprice">¥{{total}}元</td>
</tr>
</table>
</div>

商品的总价栏位 使用自动计算,{{ goods.price * goods.num}} 

view里使用了template语法,如果购物车里有商品则显示商品信息,否则就显示“购物车为空”,语法比较简单,大家看一下就明白了。

第二步 定义model:

 var model = {
        goods_list: [{name : "测试商品1",num : 1, price : 10.0},
                    {name : "测试商品2",num : 2, price : 20.0},
                    {name : "测试商品3",num : 3, price : 30.0},
                    {name: "测试商品4", num: 4, price: 40.0 }
                    ]
    };第三步 将view和model绑定一起,初始化Vue对象
 new Vue({
        el: ".con",
        data : model
    });效果见下图:

计算属性:

有同学该提出疑问了,view我们用了count和total这2个变量,可model里没有这2个变量啊,效果也是空的啊,别急别急,这2个值咱要用vue自动计算功能。

修改下初始化Vue代码部分

var table=new Vue({
el:".con",
data:{goods_list},
methods:{
//改变input的值的时候触发
changeNumber: function(event,x){
var obj=$(event.target);
x.num = parseInt(obj.val());
},
//删除
remove: function (x) {
if(confirm("您确定要删除吗?")){
goods_list.splice(x, 1);
}else{
return false;
}

},
//加
jia:function(x){
if(x.num>=x.max){
x.num=x.max
}else{
x.num+=1; 
}
},
//减
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;
}
},


})

绑定事件

购物车里用户会修改商品数量、移除商品等操作,这里我们就增加修改数量和删除事件。

第一步 修改view,增加事件绑定:

<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="移除购物车" class="del" v-on:click="remove(x)"></td>
</tr>

这里绑定事件用了v-on:事件名的方式,当然也可以用简写即“@事件名”,比如@click、@blur等等,不过Razor模版会把@事件识别为变量,所以这里还是用全名。

“changeNumber(goods,$event)”,我们要获取input的值也就是原生dom对象,所以需要传递event,不过要用特殊变量$event。

第二步 Vue初始化增加methods属性:

methods:{
//改变input的值的时候触发
changeNumber: function(event,x){
var obj=$(event.target);
x.num = parseInt(obj.val());
},
//删除
remove: function (x) {
if(confirm("您确定要删除吗?")){
goods_list.splice(x, 1);
}else{
return false;
}

},

至此我们的购物车基本功能就完成了,如果在购物车页面添加商品到购物车里只需要往model.goods_list里增加对象即可。

再配合Ajax调用后台程序持久化购物车里的商品信息就OK了,这部分代码就不贴上来了,大家可以自行实现。


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!