表單輸入繫結基礎用法

2021-09-26 08:37:36 字數 2844 閱讀 3836

可以使用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...