本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下
首先，先上最终的效果图
效果并不是很好看，但是这不是重点。
首先，我们先看下布局：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<
template
>
<
div
class
=
"shopcar"
id
=
"demo04"
>
<
div
class
=
"header-title"
>
<
h3
>购物车</
h3
>
</
div
>
<
div
class
=
"car-list"
>
<
ul
>
<
li
class
=
"car-item"
v-for
=
"(item,index) in good_list"
>
<
div
class
=
"input-block"
>
<
label
class
=
"input-label"
:class
=
"{active: item.is_selected}"
:for
=
"'car-checkbox-'+index"
@
click
=
"select_one(index)"
></
label
>
</
div
>
<
div
class
=
"car-item-content"
>
<
div
class
=
"car-img"
>
<
img
:src
=
"item.img"
/>
</
div
>
<
div
class
=
"car-cont"
>
<
h3
>{{item.title}}</
h3
>
<
div
class
=
"cat-desc"
>
<
span
v-for
=
"spec in item.spec_item"
>{{spec}}</
span
>
</
div
>
</
div
>
<
div
class
=
"num"
>
<
span
@
click
=
"reduce(index)"
>-</
span
>
<
span
>{{item.num}}</
span
>
<
span
@
click
=
"add(index)"
>+</
span
>
</
div
>
<
div
class
=
"car-price"
>
<
span
class
=
"car-price"
>￥{{item.price}}</
span
>
<
span
class
=
"car-num"
>X{{item.num}}</
span
>
</
div
>
</
div
>
</
li
>
</
ul
>
</
div
>
<
div
class
=
"car-footer"
>
<
div
class
=
"foot-car"
>
<
label
for
=
"foot-check"
class
=
"input-label"
:class
=
"{active: selected_all}"
@
click
=
"slect_all"
></
label
>
</
div
>
<
div
class
=
"total-cont"
>
<
span
>总价：{{totalPrice}}</
span
>
<
span
>共{{totalNum}}件</
span
>
</
div
>
<
div
class
=
"btn-box"
>
<
button
>立即下单</
button
>
</
div
>
</
div
>
</
div
>
</
template
>
|
非常常见的布局，微商城购物车随处可见，先说明下，在这里，实现选中的功能并不是用传统的label+checkbox实现，而是一个单独的label，目的是为了简化dom结构，在传统的jq项目或者zepto项目中，一般会会这样写，主要是为了方便操作demo，但是vue项目完全不用考虑dom的操作，怎么方便怎么来就ok。
在加些简单的样式，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
.header-title
height
42px
line-height
42px
background
#f5f5f5
border-
bottom
1px
solid
#ddd
.header-title h
3
font-weight
normal
text-align
center
.car-list
background
#f2f2f2
margin-
top
12px
padding
8px
.car-item
border-
bottom
1px
solid
#ddd
position
relative
height
76px
overflow
hidden
.car-checkbox
display
none
.input-
block
width
30px
float
left
height
55px
line-height
55px
.input-label
cursor
pointer
position
absolute
width
18px
height
18px
top
18px
left
0
background
#fff
border
:
2px
solid
#ccc
border-radius
50%
.input-label:after
opacity
0
content
''
position
absolute
width
9px
height
5px
background
transparent
top
6px
left
6px
border
2px
solid
#333
border-
top
none
border-
right
none
-webkit-transform rotate(
-45
deg)
-moz-transform rotate(
-45
deg)
-o-transform rotate(
-45
deg)
-ms-transform rotate(
-45
deg)
transform rotate(
-45
deg)
.car-img
width
64px
height
64px
float
left
overflow
hidden
.car-img img
width
100%
.input-label.active
background
#F15A24
.car-cont
margin-
left
100px
.car-cont h
3
font-weight
normal
line-height
24px
font-size
14px
.car-price
position
absolute
right
12px
bottom
0px
width
40px
height
40px
text-align
right
.car-price span
display
block
height
24px
line-height
24px
width
100%
.car-footer
height
60px
background
#f5f5f5
position
fixed
bottom
0
left
0
right
0
.foot-car
width
42px
height
60px
float
left
margin-
left
12px
position
relative
.total-cont
height
60px
line-height
60px
font-size
16px
float
left
.total-cont span
display inline-
block
margin-
left
12px
.btn-box
float
right
height
60px
line-height
60px
.btn-box button
height
100%
width
:
100px
border
none
background
#F15A24
color
#fff
font-size
16px
.num
position
absolute
top
28px
right
25px
width
120px
.num span
display inline-
block
width
28px
height
28px
float
left
text-align
center
line-height
28px
border
1px
solid
#ddd
font-size
14px
|
最近在学习stylus的使用，所以，就当做练习了。
接下就是javascript了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
export
default
{
data () {
return
{
good_list: [
{
title:
'Apple iPhone 6s 16GB 玫瑰金色 移动联通电信4G手机'
,
num: 2,
price: 6070.00,
spec_item:[
'内存:16G'
,
'网络:4G'
,
'颜色:玫瑰金'
],
is_selected:
false
},{
title:
'Apple iPhone 6s 32GB 玫瑰金色 移动联通电信4G手机'
,
num: 2,
price: 4570.00,
spec_item:[
'内存:32G'
,
'网络:4G'
,
'颜色:玫瑰金'
],
is_selected:
true
},{
title:
'Apple iPhone 6s 8GB 玫瑰金色 移动联通电信4G手机'
,
num: 2,
price: 4870.00,
spec_item:[
'内存:8G'
,
'网络:4G'
,
'颜色:玫瑰金'
],
is_selected:
false
},{
title:
'Apple iPhone 6s 128GB 玫瑰金色 移动联通电信4G手机'
,
num: 2,
price: 10568.00,
spec_item:[
'内存:128G'
,
'网络:4G'
,
'颜色:玫瑰金'
],
is_selected:
true
},
],
totalPrice: 0,
totalNum: 0,
selected_all:
false
}
},
mounted:
function
() {
this
.getTotal();
},
watch: {
'good_list'
: {
handler:
function
(val, oldVal) {
// console.log(val)
return
val;
},
deep:
true
}
},
methods: {
getTotal () {
this
.totalPrice = 0
this
.totalNum = 0
for
(
var
i = 0; i <
this
.good_list.length; i++) {
var
_d =
this
.good_list[i]
if
(_d.is_selected){
this
.totalPrice += _d[
'price'
] * _d[
'num'
]
this
.totalNum +=_d[
'num'
]
}
}
},
select_one (index) {
if
(
this
.good_list[index].is_selected ==
true
){
this
.good_list[index].is_selected =
false
}
else
{
this
.good_list[index].is_selected =
true
}
this
.getTotal()
},
slect_all () {
if
(
this
.selected_all){
for
(
var
i = 0; i <
this
.good_list.length; i++) {
this
.good_list[i].is_selected =
false
;
}
this
.selected_all =
false
}
else
{
for
(
var
i = 0; i <
this
.good_list.length; i++) {
this
.good_list[i].is_selected =
true
;
}
this
.selected_all =
true
}
this
.getTotal()
},
reduce (index) {
if
(
this
.good_list[index].num <= 1)
return
;
this
.good_list[index].num --
this
.getTotal()
},
add (index) {
this
.good_list[index].num ++
this
.getTotal()
}
}
}
|
这里用mock数据来代替后台请求数据的动作，为了方便测试，逻辑比较简单，首先getTotal这个方法用来计算选中的item的数量以及总价，select_one用来处理单个选中的逻辑，slect_all 用来处理全部选中以及全部取消选中的操作，reduce用来处理处理减操作，顾名思义add用来处理加的操作。当然在真实的开发中，还会有校验库存的动作，每次加减都要校验库存。数据处理也会更复杂，但是闻琴弦而知雅意，器原理都是相通的。
github地址传送门