js购物车功能php,基于Vuejs实现购物车功能

本文实例为大家分享了Vuejs购物车实现代码，供大家参考，具体内容如下

html:

我的vue购物车

我的购物车：

商品名称

商品单价

商品数量

操作

{{item.name}}

{{item.price}}

+

{{item.count}}

-

移除

清单：

商品总价：{{price |currency '$' 2}}

您的购物车空了

是否去重新挑选

重新挑选

new Vue({

el:'.container',

data:{

data:data

},

computed:{

price:function () {

var price = 0;

for(var i=0;i

var self = this.data[i];

price += self.count * self.price;

}

return price;

}

},

methods:{

add:function ($index) {

var self = this.data[$index];

if(self.count >10){

return false;

}

self.count++;

},

reduce:function($index){

var self = this.data[$index];

if(self.count <= 1){

return false

}

self.count--;

},

remove:function(item){

this.data.$remove(item);

}

}

})

css:h3{

text-align: center;

}

.left{

margin-left: 14%;

}

.item{

text-align: center;

padding: 3%;

}

.add{

margin-left: 15%;

}

.off{

background-color: lightgrey;

border: 1px solid lightgrey;

}

js:/**

* Created by Administrator on 2016/7/29.

*/

var data = [

{

name:'IPhone 6',

price:5466,

id:1,

count:1

},

{

name:'IMac',

price:7466,

id:2,

count:1

},

{

name:'iPad',

price:5400,

id:3,

count:1

}

]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多PHP中文网。

更多基于Vuejs实现购物车功能相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！