In-depth analysis of v-model instructions
One, v-model instruction
You can create two-way data binding on form elements. That is, the data update element is updated, and the element update data is also updated.
Essentially v-model is syntactic sugar
| Element type | Attributes | event |
|---|---|---|
| input[type=text]、textarea | value | input |
| input[checkbox]、input[radio] | checked | change |
| select | value | change |
1.input
1.type=text text box
<div id="app">
<input type="text" v-model='message'>
<p>Message为：{
{
message }}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
2.type=checkbox checkbox
1. Single check box
Bind to Boolean, v-model="Boolean"
<div id="app">
<input type="checkbox" id="checkbox1" :checked=false>
<label for="checkbox1">大哥</label>
<input type="checkbox" id="checkbox2" v-model='checkbox'>
<label for="checkbox2">二哥</label>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
checkbox: true
}
})
</script>
2. Multiple checkboxes
<div id="app">
<input type="checkbox" id="large" value="大哥" v-model="checkedNames">
<label for="large">大哥</label>
<input type="checkbox" id="second" value="二哥" v-model="checkedNames">
<label for="second">二哥</label>
<input type="checkbox" id="small" value="小弟" v-model="checkedNames">
<label for="small">小弟</label>
<br>
<span>被选中的人有: {
{
checkedNames }}</span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
3.type=radio single selection box
<div id="app">
<input type="radio" id="large" value="大哥" v-model="picked">
<label for="large">大哥</label>
<input type="radio" id="second" value="二哥" v-model="picked">
<label for="second">二哥</label>
<input type="radio" id="small" value="小弟" v-model="picked">
<label for="small">小弟</label>
<br>
<span>被选中的人: {
{
picked }}</span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
picked: []
}
})
</script>
2.textarea
<div id="app">
<p >多行文本为：{
{
message }}</p>
<textarea v-model="message" placeholder="添加文本"></textarea>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
3.select
The matched value is the Chinese character in option
1. Single selection
<div id="app">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择: {
{
selected === '请选择' ? '' : selected }}</span>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
selected: '请选择'
}
})
</script>
Note: If the v-modelinitial value of the expression fails to match any option <select>elements will be rendered as "unchecked" state. In iOS, this prevents the user from choosing the first option. Because in this case, iOS will not trigger the change event. Therefore, you can provide a disable option with an empty value:
<div id="app">
<select v-model="selected">
<option :disabled='selected'>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择: {
{
selected === '请选择' ? '' : selected }}</span>
</div>
2. Multiple selection
<div id="app">
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择: {
{
selected }}</span>
</div>
4. Modifiers
1.lazy
By default, v-model synchronizes the value of the input box with the data after each input event is triggered. If you want to change to use change event synchronization, you can add the lazy modifier:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
2.number
Automatically convert the user's input value into a numeric type:
<input v-model.number="age" type="number">
3.trim
Automatically filter the first and last blank characters entered by the user :
<input v-model.trim="msg">
