本文实例为大家分享了Vuejs购物车实现代码，供大家参考，具体内容如下
html:
|
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
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>我的vue购物车</
title
>
<
link
rel
=
"stylesheet"
href
=
"css/bootstrap.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"css/style.css"
>
<
script
src
=
"js/vue.js"
></
script
>
<
script
src
=
"js/data.js"
></
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
template
v-if
=
"data.length"
>
<
h3
>我的购物车：</
h3
>
<
div
class
=
"product"
>
<
div
class
=
"item"
>
<
span
class
=
"btn btn-default"
>商品名称</
span
>
<
span
class
=
"btn btn-default left"
>商品单价</
span
>
<
span
class
=
"btn btn-default left"
>商品数量</
span
>
<
span
class
=
"btn btn-default left"
>操作</
span
>
</
div
>
<
div
class
=
"item"
style
=
"padding:5%;border: 1px solid black"
v-for
=
"item in data"
>
<
span
class
=
"btn btn-default"
>{{item.name}}</
span
>
<
span
class
=
"btn btn-default left"
style
=
"margin-left: 18%"
>{{item.price}}</
span
>
<
span
>
<
em
class
=
"btn btn-primary add"
v-on:click
=
"add($index)"
:class
=
"{off:item.count==11}"
>+</
em
>
{{item.count}}
<
em
class
=
"btn btn-primary reduce"
v-on:click
=
"reduce($index)"
:class
=
"{off:item.count==1}"
>-</
em
>
</
span
>
<
span
class
=
"btn btn-danger left"
v-on:click
=
"remove(item)"
>移除</
span
>
</
div
>
</
div
>
<
h2
>清单：</
h2
>
<
span
class
=
"btn btn-primary"
>商品总价：{{price |currency '$' 2}}</
span
>
</
template
>
<
template
v-else>
<
div
class
=
"jumbotron"
>
<
h1
>您的购物车空了</
h1
>
<
p
>是否去重新挑选</
p
>
<
p
><
a
class
=
"btn btn-primary btn-lg"
href
=
"#"
role
=
"button"
>重新挑选</
a
></
p
>
</
div
>
</
template
>
</
div
>
</
body
>
<
script
>
new Vue({
el:'.container',
data:{
data:data
},
computed:{
price:function () {
var price = 0;
for(var i=0;i<
this.data.length
;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);
}
}
})
</
script
>
</
html
>
|
css:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
h
3
{
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/**
* 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
}
]
|