1.基礎(chǔ)用法
v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定
v-model會(huì)忽略表單元素的value, checked, selected的初始值逐沙，使用v-model綁定值
<!-- 文本框 -->
<input type="text" v-model="text"/>
<!-- 復(fù)選框(單個(gè)勾選框) -->
<input type="checkbox" v-model="checked"/>
<label>{{checked}}</label>
<!-- 復(fù)選框(多個(gè)勾選,綁定同一個(gè)數(shù)據(jù)) -->
<input type="checkbox" value="1" v-model="checkboxes"/>
<input type="checkbox" value="2" v-model="checkboxes"/>
<label>{{checkboxes}}</label>
<!-- 單選框 -->
<input type="radio" value="1" v-model="radios"/>
<input type="radio" value="2" v-model="radios"/>
<label>{{radios}}</label>
<!-- 選擇列表 -->
<select v-model="select">
<!-- 建議提供disabled -->
<option disabled value="">請(qǐng)選擇</option>
<option v-for="item in items" :value="item.id">{{item.name}</option>
</select>
var app = new Vue({
el: "#app",
data: {
text: "",
checked: true,
checkboxes: [],
radios: [],
select: "",
items: [{id: 1, name: "66"}, {id: 2, name: "77"}],
}
});
2.綁定value
<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"/>
<label>{{toggle}}</label>
<!-- 選擇列表 -->
<select v-model="select">
<!-- :value綁定一個(gè)對(duì)象 -->
<option v-for="item in items" :value="item">{{item.name}}</option>
</select>
<label>{{select}}</label>
var app = new Vue({
el: "#app",
data: {
toggle: "",
a: "a",
b: "b",
select: "",
items: [{id: 1, name: "66"}, {id: 2, name: "77"}]
}
});
3.修飾符
<!-- 修飾符lazy,將v-model綁定值同步延遲到change事件 -->
<input v-model.lazy="text"/>
<!-- 修飾符number,將v-model綁定的值轉(zhuǎn)換為Number類(lèi)型 -->
<input v-model.number="number"/>
<!-- 修飾符trim,將v-model綁定的值過(guò)濾首尾空格 -->
<input v-model.trim="text"/>
