1、 提供的静态数据
-
数据存放在vue 中 data 属性中
-
[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
41
42
43
var vm
=
new
Vue
(
{
el
:
'
#app',
data
:
{
books
:
[
{
id
:
1
,
name
:
'三国演义'
,
date
:
''
}
,
{
id
:
2
,
name
:
'水浒传'
,
date
:
''
}
,
{
id
:
3
,
name
:
'红楼梦'
,
date
:
''
}
,
{
id
:
4
,
name
:
'西游记'
,
date
:
''
}
]
}
}
)
; var vm
=
new
Vue
(
{
el
:
'
#app',
data
:
{
books
:
[
{
id
:
1
,
name
:
'三国演义'
,
date
:
''
}
,
{
id
:
2
,
name
:
'水浒传'
,
date
:
''
}
,
{
id
:
3
,
name
:
'红楼梦'
,
date
:
''
}
,
{
id
:
4
,
name
:
'西游记'
,
date
:
''
}
]
}
}
)
;
- 2、 把提供好的数据渲染到页面上
-
利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<
tbody
>
<
tr
:
key
=
'
item
.
id
' v
-
for
=
'
item
in
books'
>
<
!
-- 对应的id 渲染到页面上 -->
<
td
>
{
{
item
.
id
}
}
<
/
td
>
<
!
-- 对应的name 渲染到页面上 -->
<
td
>
{
{
item
.
name
}
}
<
/
td
>
<
td
>
{
{
item
.
date
}
}
<
/
td
>
<
td
>
<
!
-- 阻止 a 标签的默认跳转 -->
<
a href
=
""
@click.prevent
>
修改
<
/
a
>
<
span
>
|
<
/
span
>
<
a href
=
""
@click.prevent
>
删除
<
/
a
>
<
/
td
>
<
/
tr
>
<
/
tbody
>
- 3、 添加图书
-
通过双向绑定获取到输入框中的输入内容
-
给按钮添加点击事件
-
把输入框中的数据存储到 data 中的 books 里面
-
[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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<
div
>
<
h
1
>
图书管理
<
/
h
1
>
<
div
class
=
"book"
>
<
div
>
<
label
for
=
"id"
>
编号:
<
/
label
>
<
!
-- 3.1、通过双向绑定获取到输入框中的输入的 id -->
<
input type
=
"text"
id
=
"id"
v
-
model
=
'
id
'
>
<
label
for
=
"name"
>
名称:
<
/
label
>
<
!
-- 3.2、通过双向绑定获取到输入框中的输入的 name -->
<
input type
=
"text"
id
=
"name"
v
-
model
=
'
name
'
>
<
!
-- 3.3、给按钮添加点击事件 -->
<
button
@click
=
'handle'
>
提交
<
/
button
>
<
/
div
>
<
/
div
>
<
/
div
>
<
script
type
=
"text/javascript"
>
/
*
图书管理
-
添加图书
*
/
var vm
=
new
Vue
(
{
el
:
'
#app',
data
:
{
id
:
''
,
name
:
''
,
books
:
[
{
id
:
1
,
name
:
'三国演义'
,
date
:
''
}
,
{
id
:
2
,
name
:
'水浒传'
,
date
:
''
}
,
{
id
:
3
,
name
:
'红楼梦'
,
date
:
''
}
,
{
id
:
4
,
name
:
'西游记'
,
date
:
''
}
]
}
,
methods
:
{
handle
:
function
(
)
{
/
/
3.4
定义一个新的对象book 存储 获取到输入框中 书 的
id
和名字
var book
=
{
}
;
book.
id
=
this.
id
;
book.
name
=
this.
name
;
book.
date
=
'';
/
/
3.5
把book 通过数组的变异方法 push 放到 books 里面
this.books.push
(
book
)
;
/
/
3.6
清空输入框
this.
id
=
'';
this.
name
=
'';
}
}
}
)
;
<
/
script
>
-
-