v-model只能用於 input 、select、 textarea這些表單元素上實現雙向資料繫結。
所謂雙向書資料繫結,指的是在vue物件中的data與其繫結的dom元素的內容保持一致。兩者無論誰被改變,另乙個也相應改變。
因為表單元素展現資料的方式不同,在實現雙向資料繫結時,vue會根據不同的控制項型別自動選擇正確的方式來更新資料。 控制項的不同?
v-model input輸入框 與textarea
input輸入框與textarea都能正常顯示資料的控制項,在資料更新時直接以資料形式更新即可。
v-model 單選框
單選框,繫結v-model後,可以直接獲取選項中的value值
v-model 選項列表
select列表分為單選列表,與多選列表。 單選列表繫結v-model後,可以實現列表資料的雙向資料繫結。 多選列表繫結v-model後,value值繫結到陣列中。
v-mode修飾符
vue為v-model設計了一些修飾符,一方便處理某些表單控制項的常規操作。 .lazy 懶惰的 .number 數字 .trim 修飾(在js中一般代表去掉空格)
v-mode 修飾符 .lazy
預設情況下,繫結v-model的輸入框內容改變的同時,vue的值也會改變。新增.lazy後,將會改變這種同步方式——input失去焦點後vue的值才會改變
v-model 修飾符 .number
自動將使用者的輸入值轉為number型別(如果轉為nan,則放棄型別轉換)。
vue元件應用v model
一 input上的v model原理 vue中的v model最常用的就是在input節點上,像下面這樣 text v model message v model實際上是一種資料和方法繫結的語法糖 text value message input message event.target.value...
v model 表單系類
radio name val id value 男 v model value 男 label radio name val id value 女 v model value 女 label 你的性別是 p data 單選 agree checkbox name val id agree v mod...
vue中v model的原理及應用講解
v model其實是乙個語法糖 背後包含兩個操作 v bind動態繫結乙個value屬性 v on給當前元素繫結input事件 也就是說以下兩段 等價 type text v model message type text v bind value message v on input messag...