开始更新前端框架Vue.JS的相关博客。
功能概述
学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:
(1)展示商品的名称、单价和数量;
(2)商品的数量可以增加和减少;
(3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变;
(4)商品可以从购物车中移除;
(5)具有选择功能,只计算选中的商品的总价。
上一张截图,如下:
代码
代码分成三部分,分别是HTML、JS、CSS。关键的是HTML和JS。
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
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Vue 购物车</
title
>
<
script
src
=
"../js/vue.min.js"
></
script
>
<
link
href
=
"../css/cart.css"
rel
=
"external nofollow"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
div
id
=
"app"
v-cloak>
<
template
v-if
=
"list.length"
>
<
table
>
<
thead
>
<
tr
>
<
th
><
input
type
=
"checkbox"
v-on:click
=
"swapCheck"
v-model
=
"checked"
></
th
>
<
th
>商品名称</
th
>
<
th
>商品单价</
th
>
<
th
>商品数量</
th
>
<
th
>操作</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
v-for
=
"(item,index) in list"
>
<
td
><
input
type
=
"checkbox"
v-model
=
"selectList"
:id
=
"item.id"
:value
=
"index"
name
=
"selectList"
></
td
>
<
td
>{{ item.name }}</
td
>
<
td
>{{ item.price }}</
td
>
<
td
>
<
button
@
click
=
"handleReduce(index)"
:disabled
=
"item.count === 1"
>-</
button
>
{{ item.count }}
<
button
@
click
=
"handleAdd(index)"
>+</
button
>
</
td
>
<
td
><
button
@
click
=
"handleRemove(index)"
>移除</
button
></
td
>
</
tr
>
</
tbody
>
</
table
>
<
div
>总价:¥ {{ totalPrice }}</
div
>
</
template
>
<
div
v-else>购物车为空!</
div
>
</
div
>
<
script
src
=
"../js/cart.js"
></
script
>
</
body
>
</
html
>
|
JS
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
|
var
app =
new
Vue({
el:
'#app'
,
data:{
list:[
{
id:1,
name:
'iPhone 8'
,
price:8888,
count:1
},
{
id:2,
name:
'Huwei Mate10'
,
price:6666,
count:1
},
{
id:3,
name:
'Lenovo'
,
price:6588,
count:1
}
],
selectList:[],
checked:
false
},
computed:{
totalPrice:
function
(){
var
total = 0;
for
(
var
i = 0,len =
this
.selectList.length;i < len;i++){
var
index =
this
.selectList[i];
var
item =
this
.list[index];
if
(item){
total += item.price * item.count;
}
else
{
continue
;
}
}
return
total.toString().replace(/\B(?=(\d{3})+$)/g,
','
);
}
},
methods:{
handleReduce:
function
(index){
var
item =
this
.list[index];
if
(item.count < 2){
return
;
}
item.count--;
},
handleAdd:
function
(index){
var
item =
this
.list[index];
item.count++;
},
handleRemove:
function
(index){
this
.list.splice(index,1);
},
swapCheck:
function
(){
var
selectList = document.getElementsByName(
'selectList'
);
var
len = selectList.length;
if
(
this
.checked){
for
(
var
i = 0;i < len;i++){
var
item = selectList[i];
item.checked =
false
;
}
this
.checked =
false
;
this
.selectList = [];
}
else
{
for
(i = 0;i < len;i++){
item = selectList[i];
if
(item.checked ===
false
){
item.checked =
true
;
this
.selectList.push(selectList[i].value);
}
}
this
.checked =
true
;
}
}
}
});
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
[v-cloak]{
display
:
none
;
}
table{
border
:
1px
solid
black
;
border-collapse
:
collapse
;
border-spacing
:
0
;
empty-cells
:
show
;
}
th,td{
padding
:
8px
16px
;
border
:
1px
solid
black
;
text-align
:
center
;
}
th{
background-color
:
gray
;
}
|
关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。