表单基本操作
-
获取单选框中的值
-
通过v-model
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<
!
--
1
、 两个单选框需要同时通过v
-
model 双向绑定 一个值
2
、 每一个单选框必须要有
value
属性 且
value
值不能一样
3
、 当某一个单选框选中的时候 v
-
model 会将当前的
value
值 改变
data
中的 数据
gender 的值就是选中的值,我们只需要实时监控他的值就可以了
-->
<
input type
=
"radio"
id
=
"male"
value
=
"1"
v
-
model
=
'gender'
>
<
label
for
=
"male"
>
男
<
/
label
>
<
input type
=
"radio"
id
=
"female"
value
=
"2"
v
-
model
=
'gender'
>
<
label
for
=
"female"
>
女
<
/
label
>
<
script
>
new
Vue
(
{
data
:
{
/
/
默认会让当前的
value
值为
2
的单选框选中
gender
:
2
,
}
,
}
)
<
/
script
>
-
获取复选框中的值
-
通过v-model
-
和获取单选框中的值一样
-
复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
-
[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
<
!
--
1
、 复选框需要同时通过v
-
model 双向绑定 一个值
2
、 每一个复选框必须要有
value
属性 且
value
值不能一样
3
、 当某一个单选框选中的时候 v
-
model 会将当前的
value
值 改变
data
中的 数据
hobby 的值就是选中的值,我们只需要实时监控他的值就可以了
-->
<
div
>
<
span
>
爱好:
<
/
span
>
<
input type
=
"checkbox"
id
=
"ball"
value
=
"1"
v
-
model
=
'hobby'
>
<
label
for
=
"ball"
>
篮球
<
/
label
>
<
input type
=
"checkbox"
id
=
"sing"
value
=
"2"
v
-
model
=
'hobby'
>
<
label
for
=
"sing"
>
唱歌
<
/
label
>
<
input type
=
"checkbox"
id
=
"code"
value
=
"3"
v
-
model
=
'hobby'
>
<
label
for
=
"code"
>
写代码
<
/
label
>
<
/
div
>
<
script
>
new
Vue
(
{
data
:
{
/
/
默认会让当前的
value
值为
2
和
3
的复选框选中
hobby
:
['
2
'
,
'
3
']
,
}
,
}
)
<
/
script
>
-
获取下拉框和文本框中的值
-
通过v-model
-
[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
<
div
>
<
span
>
职业:
<
/
span
>
<
!
--
1
、 需要给
select
通过v
-
model 双向绑定 一个值
2
、 每一个option 必须要有
value
属性 且
value
值不能一样
3
、 当某一个option选中的时候 v
-
model 会将当前的
value
值 改变
data
中的 数据
occupation 的值就是选中的值,我们只需要实时监控他的值就可以了
-->
<
!
-- multiple 多选 -->
<
select
v
-
model
=
'occupation' multiple
>
<
option
value
=
"0"
>
请选择职业...
<
/
option
>
<
option
value
=
"1"
>
教师
<
/
option
>
<
option
value
=
"2"
>
软件工程师
<
/
option
>
<
option
value
=
"3"
>
律师
<
/
option
>
<
/
select
>
<
!
-- textarea 是 一个双标签 不需要绑定value 属性的 -->
<
textarea v
-
model
=
'desc'
>
<
/
textarea
>
<
/
div
>
<
script
>
new
Vue
(
{
data
:
{
/
/
默认会让当前的
value
值为
2
和
3
的下拉框选中
occupation
:
['
2
'
,
'
3
']
,
desc
:
'nihao'
}
,
}
)
<
/
script
>
-
-
-