七 vue基礎 表單輸入繫結

2021-10-02 01:16:55 字數 1770 閱讀 5770

二.值繫結

可以使用v-model指令在表單)並不會生效, 應用v-model來代替

核取方塊單個核取方塊, 繫結到布林值:

type

="checkbox"

id="checkbox"

v-model

="checked"

>

for=

"checkbox"

>

}label

>

多個核取方塊, 繫結到同乙個陣列:

"example-3"

>

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(

})

單選按鈕

one

twopicked:}

new

vue(

})

選擇框

單選時:

請選擇ab

c selected: }

new

vue(

})

多選時(繫結到乙個陣列):

abc

selected: }

new

vue(

})

v-for渲染的動態選項:

}

selected:}

new

vue(,,

]}})

對於單選按鈕, 核取方塊及選擇框的選項,v-model繫結的值通常是靜態字串(對於核取方塊也可以是布林值)

abc

但是有時我們可能想把值繫結到vue例項的乙個動態屬性上, 這時可以用v-bind實現, 並且這個屬性的值可以不是字串.

參考文件

vue表單輸入繫結

class v cloak type text v model inpval click add 增加button v for item in arr li ul v model textval name rows cols textarea p type checkbox name hobby i...

vue 表單輸入繫結

v model 指令在表單 input textarea select元素上建立雙向資料繫結 他會根據控制項型別自動獲取正確的放大來更新元素,text和textarea元素適應value屬性和input事件 checkbox和我radio使用checked屬性和change事件 select欄位將v...

vue 表單輸入繫結

用v model指令在表單 1 單行文字框 2 多行文字框 3 複選按鈕 4 單選按鈕 5 下拉列表 11 2233 使用修飾符可以增加表單繫結能力 1 lazy 預設情況下,v model 在每次 input 事件觸發後將輸入框的值與資料進行同步。可以新增 lazy 修飾符,從而轉為在 chang...