可以使用v-model
指令在、
) 並不會生效,應用
v-model
來代替。
單個核取方塊,繫結到布林值:
type
="checkbox"
id="checkbox"
v-model
="checked"
>
for=
"checkbox"
>
}label
>
多個核取方塊,繫結到同乙個陣列:
'example'
>
type
="checkbox"
id="jack"
value
="jack"
v-model
="checkednames"
>
for=
"jack"
>
jacklabel
>
type
="checkbox"
id="john"
value
="john"
v-model
="checkednames"
>
for=
"john"
>
johnlabel
>
type
="checkbox"
id="mike"
value
="mike"
v-model
="checkednames"
>
for=
"mike"
>
mikelabel
>
>
>
checked names: }span
>
div>
new
vue(
})
"example"
>
type
="radio"
id="one"
value
="one"
v-model
="picked"
>
for=
"one"
>
onelabel
>
>
type
="radio"
id="two"
value
="two"
v-model
="picked"
>
for=
"two"
>
twolabel
>
>
>
picked: }span
>
div>
new
vue(
})
單選時:
"example"
>
v-model
="selected"
>
disabled
value="
">
請選擇option
>
>
aoption
>
>
boption
>
>
coption
>
select
>
>
selected: }span
>
div>
new
vue(
})
如果v-model
表示式的初始值未能匹配任何選項,
元素將被渲染為「未選中」狀態。在 ios 中,這會使使用者無法選擇第乙個選項。因為這樣的情況下,ios 不會觸發change
事件。因此,更推薦像上面這樣提供乙個值為空的禁用選項。
多選時 (繫結到乙個陣列):
"example"
>
v-model
="selected"
multiple
style
="width
: 50px;
">
>
aoption
>
>
boption
>
>
coption
>
select
>
>
>
selected: }span
>
div>
new
vue(
})
用 v-for 渲染的動態選項:
v-model
="selected"
>
v-for
="option in options"
v-bind:value
="option.value"
>
}option
>
select
>
>
selected: }span
>
new
vue(,,
]}})
表單輸入繫結
可以用 v model 指令在表單 var vm1 new vue 1 單個核取方塊,繫結到布林值 單個核取方塊 new vue 2 多個核取方塊,繫結到同一陣列 jack john mike checked names new vue one twopicked new vue 1 單選 請選擇a...
表單輸入繫結
v model指定可以實現表單值與屬性的雙向繫結。即表單元素中更改了值會自動的更新屬性中的值,屬性中的值更新了會自動更新表單中的值。繫結的屬性和事件 v model在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件 text和textarea元素使用value屬性和input事件。checkbox...
七 vue基礎 表單輸入繫結
二.值繫結 可以使用v model指令在表單 並不會生效,應用v model來代替 核取方塊單個核取方塊,繫結到布林值 type checkbox id checkbox v model checked for checkbox label 多個核取方塊,繫結到同乙個陣列 example 3 typ...