二.值繫結
可以使用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...