vuejs表單控制項繫結

vuejs中用v-model指令在表單控制項元素上建立雙向資料繫結。它會根據控制項型別自動選取正確的方法來更新元素。但要注意的是v-model僅僅是語法糖，它只負責監聽使用者的輸入時間一更新資料，並特別處理一些極端的例子。

注：1.·v-model`並不關心表單控制項初始化所生成的值。因為它會選擇vue例項資料來作為具體的值

2.當控制項有多種語言的需求時，v-model不會因為語言的改變而更新，在這種情況下要使用`input』事件來替代

v-model="message"
placeholder="edit me">
message is: 
}p>

multiline message is:span>
style="white-space: pre">
}p>
v-model="message"
placeholder="add multiple lines">
textarea>

注：在文字區域插值()並不會生效，應用v-model來替代a.單個勾選框，邏輯值：

type="checkbox"
id="checkbox"
v-model="checked">
for="checkbox">
}label>

b.多個勾選框，繫結到同乙個陣列：

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>

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>

a.單選列表:

v-model="selected">
aoption>
boption>
coption>
select>
selected: 
}span>

b.多選列表（繫結到同乙個陣列）：

v-model="selected">
aoption>
boption>
coption>
select>
selected: 
}span>

c.用v-for渲染：

//html
v-model="selected">
v-for="option in options"
v-bind:value="option.text">
}option>
select>
selected: 
}span>

//js
new vue(,,]
}});

對於單選按鈕，勾選框及選擇列表選項，v-model繫結的value通常是靜態字串（對於勾選框是邏輯值）：

//當選中時，`picked` 為字串 "a"
"radio" v-model="picked" value="a">
//`toggle` 為 true 或 false
"checkbox" v-model="toggle">
//當選中時，`selected` 為字串 "abc"
"selected">
"abc">abc
通過`v-bind`可以自己定義控制項選中時顯示的value值

1.核取方塊

="checkbox"
v-model
="toggle"
v-bind:true
-value
="a"
v-bind:false
-value
="b"
>

// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b

2.單選按鈕

type=
"radio" v-model="pick" v-bind:value="a">

// 當選中時
vm.pick === vm.a

3.選擇列表設定

v-model="selected">
v-bind:value="">123option>
v-bind:value="">456option>
v-bind:value="">789option>
select>

typeof vm.selected //
->
'object'
vm.selected.number //
->
123 || 456 || 789

1..lazy

在預設情況下，v-model在input事件中同步輸入框的值與資料（除了上述語言問題部分），這是我們可以新增乙個修飾符.lazy，從而轉變為在change事件中同步：


v-model.lazy="msg" >

2..number

如果想自動將使用者的輸入值轉為number型別（如果原值的轉換結果為nan則返回原值），可以新增乙個修飾符number給v-model來處理輸入值：

"age"
type="number">

這通常很有用，因為在type="number"時html中輸入的值也總是會返回字串型別。

3.trim

如果要自動過濾使用者輸入的首尾空格，可以新增trim修飾符到v-model上過濾輸入：

v-model.trim="msg">

總結：表單的總結繫結通常很有效，通過三種修飾符我們可以有效的對使用者的輸入進行處理，並根據自身需求決定什麼時候響應事件；操作非常簡單，繫結的單個控制項時，我們我們往往只需要在data中使用乙個變數設定初始值即可，對於多選，只需要將變數設為陣列即可，選中控制項的value值可以通過v-bind進行繫結。

vuejs表單控制項繫結

Vue 表單控制項繫結

vue 表單控制項繫結

將資料雙向繫結到表單控制項中

vuejs表單控制項繫結

Vue 表單控制項繫結

vue 表單控制項繫結

將資料雙向繫結到表單控制項中

相關推薦