vue表單應用 v model

2021-09-30 20:25:11 字數 939 閱讀 3631

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...