<!--
v-model
使用v-model后,表单控件显示的值只依赖所绑定的数据,
不在关心初始化时的value;
对于textarea 之间插入的值,
在中文输入法没有选定插入的值之前,不会触发更新,
可以使用@input来代替
radio checkbox select 的用法
修饰符:
.lazy 失去焦点或者回车才更新
v-mode.lazy="message"
.number
v-mode.lazy="message"
.trim 自动过滤首尾空格
-->
<
input
type=
"text"
v-model="
message"
>
<!-- <textarea v-model="message" id cols="30" rows="10"></textarea> -->
<
textarea
@input="
handlerInput"
id
cols=
"30"
rows=
"10"
></
textarea
>
<!-- 单选按钮 -->
<!-- 单独使用 -->
<
input
type=
"radio"
:checked="
pickd"
>
<!-- 互斥效果 -->
<
input
type=
"radio"
v-model="
pickAll"
value=
"html"
>
<
input
type=
"radio"
v-model="
pickAll"
value=
"js"
>
<
input
type=
"radio"
v-model="
pickAll"
value=
"css"
>
<
hr
>
<!-- 复选框 -->
<!-- 单独使用 -->
<
input
type=
"checkbox"
id=
"checkOnly"
v-model="
checkOnly"
>
<
label
for=
"checkOnly"
>{{
checkOnly}}
</
label
>
<!-- 单独使用 -->
<
input
type=
"checkbox"
id=
"checkOnlyhtml"
v-model="
checkAll"
value=
"html"
>
<
label
for=
"checkOnlyhtml"
>html
</
label
>
<
input
type=
"checkbox"
id=
"checkOnlyjs"
v-model="
checkAll"
value=
"js"
>
<
label
for=
"checkOnlyjs"
>js
</
label
>
<
input
type=
"checkbox"
id=
"checkOnlycss"
v-model="
checkAll"
value=
"css"
>
<
label
for=
"checkOnlycss"
>css
</
label
>
<
hr
>
<!-- 选择列表 -->
<!--
option 含有value 有限匹配value
否则匹配 text
-->
<
select
v-model="
selectedOnly"
>
<
option
v-for="(
item,
index)
in
optList"
:value="
item.
value"
:key="
index"
>{{
item.
text}}
</
option
>
</
select
>