案例选项卡1、 HTML 结构
[AppleScript] 纯文本查看 复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 |
|
2、 提供的数据
[AppleScript] 纯文本查看 复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 |
|
3、 把数据渲染到页面
-
把tab栏 中的数替换到页面上
-
把 data 中 title 利用 v-for 循环渲染到页面上
-
把 data 中 path利用 v-for 循环渲染到页面上
-
[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
37
38
39
40
<
div
id
=
"app"
>
<
div
class
=
"tab"
>
<
ul
>
<
!
--
1
、绑定
key
的作用 提高Vue的性能
2
、
key
需要是唯一的标识 所以需要使用
id
, 也可以使用
index
,
index
也是唯一的
3
、
item
是 数组中对应的每一项
4
、
index
是 每一项的 索引
-->
<
li
:
key
=
'
item
.
id
' v
-
for
=
'
(
item
,
index
)
in
list
'
>
{
{
item
.
title
}
}
<
/
li
>
<
/
ul
>
<
div
:
key
=
'
item
.
id
' v
-
for
=
'
(
item
,
index
)
in
list
'
>
<
!
-- : 是 v-bind 的简写 绑定属性使用 v-bind -->
<
img
:
src
=
"item.path"
>
<
/
div
>
<
/
div
>
<
/
div
>
<
script
>
new
Vue
(
{
/
/
指定 操作元素 是
id
为app 的
el
:
'
#app',
data
:
{
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
>
-