4、 给每一个tab栏添加事件,并让选中的高亮
-
4.1 、让默认的第一项tab栏高亮
-
tab栏高亮 通过添加类名active 来实现 (CSS active 的样式已经提前写好)
-
在data 中定义一个 默认的 索引 currentIndex 为 0
-
给第一个li 添加 active 的类名
-
通过动态绑定class 来实现 第一个li 的索引为 0 和 currentIndex 的值刚好相等
-
currentIndex === index 如果相等 则添加类名 active 否则 添加 空类名
-
-
-
-
4.2 、让默认的第一项tab栏对应的div 显示
-
实现思路 和 第一个 tab 实现思路一样 只不过 这里控制第一个div 显示的类名是 current
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
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
<
ul
>
<
!
-- 动态绑定class 有 active 类名高亮 无 active 不高亮-->
<
li
:
class
=
'currentIndex
=
=
index
?
"active"
:
""
'
:
key
=
'
item
.
id
' v
-
for
=
'
(
item
,
index
)
in
list
'
>
{
{
item
.
title
}
}
<
/
li
>
<
/
ul
>
<
!
-- 动态绑定class 有 current 类名显示 无 current 隐藏-->
<
div
:
class
=
'currentIndex
=
=
index
?
"current"
:
""
'
:
key
=
'
item
.
id
' v
-
for
=
'
(
item
,
index
)
in
list
'
>
<
!
-- : 是 v-bind 的简写 绑定属性使用 v-bind -->
<
img
:
src
=
"item.path"
>
<
/
div
>
<
script
>
new
Vue
(
{
el
:
'
#app',
data
:
{
currentIndex
:
0
,
/
/
选项卡当前的索引 默认为
0
list
:
[
{
id
:
1
,
title
:
'apple'
,
path
:
'img
/
apple.png'
}
,
{
id
:
2
,
title
:
'orange'
,
path
:
'img
/
orange.png'
}
,
{
id
:
3
,
title
:
'lemon'
,
path
:
'img
/
lemon.png'
}
]
}
}
)
<
/
script
>
-