通过vue实现购物车数字加减

7月/30日


越来越多的项目采用vue开发,来替代jquery,切图网qietu.com长期致力于web前端切图开发工作,对于vue和jquery都有了解,基于这样的背景来说, jquery依然很锋利,而vue拥有更好的数据处理逻辑,两者都不错,比如之前给美的遥控做的网页版,逻辑非常之多,就采用了vue+jquery的混用。

下面是vue实现数字加减的方法,而如果是jquery则有一款spinner.js插件非常好用,下面是vue的方法:

<script type=”text/javascript”>
var cartbox=new Vue({
el:”#cart-box”,
data:{
buy_num:”,
cart_list: [
],
},
created:function(){
this.getGoods()
},
methods:{
getGoods:function(){
$.getJSON(“{:url(‘/cart/getCart’,)}”, function(json){
if(json.code == 200){
cartbox.cart_list=json.data.cart_list;
}else{

}
});
},
addCartNum:function (index) {
var buy_nums=this.cart_list[index].buy_num
if(buy_nums>30){
return false;
}
this.cart_list[index].buy_num++;
},
reduceCartNum:function(index){
var buy_nums=this.cart_list[index].buy_num
if(buy_nums <= 1){
return false;
}
this.cart_list[index].buy_num–;
}

}

});
</script>

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang