<!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
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
}
]
|
2. [代码][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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!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
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
}
]
|