v-model writing method
<input type="text" v-model="mag">
<div>{
{
mag}}</div>
data(){
return {
mag:'HELLO WORLD'
}
},
v-model principle
Divided into two steps:
1. v-bind binds the value attribute
2. v-on binds the input event
<div>{
{
mag}}</div>
<input type="text" :value="mag" @input="change">
data(){
return {
mag:'HELLO WORLD'
}
},
methods:{
change(e){
this.mag = e.target.value
console.log(e)
}
}
v-model checkbox (Checkbox)
single check
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{
{
checked }}</label>
data(){
return {
checked:true,
}
},
Multiple checkboxes (received with array)
<input type="checkbox" value="小明" v-model="checkedNames" />
<label for="小明">小明</label>
<input type="checkbox" value="小李" v-model="checkedNames" />
<label for="小李">小李</label>
<input type="checkbox" value="小陈" v-model="checkedNames" />
<label for="小陈">小陈</label>
data(){
return {
checkedNames:[]
}
},
v-model radio button (radio)
<input type="radio" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {
{
picked }}</span>
data(){
return {
picked:''
}
},
v-model selection box (Select)
Single choice
<select v-model="selected">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span>Selected: {
{
selected }}</span>
data(){
return {
selected:'2',
}
},
Multiple choice
<select v-model="selecteds" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span>Selected: {
{
selecteds }}</span>
data(){
return {
selecteds:[]
}
},
modifier
.lazy
By default, v-model updates in real time. If you don't want it to update in real time, you need to add the .lazy modifier. The function is to update when the event loses focus.
<input v-model.lazy="mag" />
data(){
return {
mag:'mag'
}
},
.number
If you want to automatically convert the user's input value to a numeric type, you can add the number modifier to v-model
<input v-model.number="age" type="text" />
.trim
If you want to automatically filter the leading and trailing whitespace characters entered by the user, you can add the trim modifier to v-model:
<input v-model.trim="msg" />