método de escritura del modelo v
<input type="text" v-model="mag">
<div>{
{
mag}}</div>
data(){
return {
mag:'HELLO WORLD'
}
},
principio del modelo v
Dividido en dos pasos:
1. v-bind vincula el atributo de valor
2. v-on vincula el evento de entrada
<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)
}
}
casilla de verificación del modelo v (casilla de verificación)
cheque único
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{
{
checked }}</label>
data(){
return {
checked:true,
}
},
Varias casillas de verificación (recibidas con una matriz)
<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:[]
}
},
Botón de radio modelo V (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:''
}
},
cuadro de selección de modelo v (Seleccionar)
elección única
<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',
}
},
Opción multiple
<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:[]
}
},
modificador
.perezoso
De forma predeterminada, v-model se actualiza en tiempo real. Si no desea que se actualice en tiempo real, debe agregar el modificador .lazy. La función es actualizar cuando el evento pierde el foco.
<input v-model.lazy="mag" />
data(){
return {
mag:'mag'
}
},
.número
Si desea convertir automáticamente el valor de entrada del usuario a un tipo numérico, puede agregar el modificador de número a v-model
<input v-model.number="age" type="text" />
.recortar
Si desea filtrar automáticamente los espacios en blanco iniciales y finales ingresados por el usuario, puede agregar el modificador de recorte a v-model:
<input v-model.trim="msg" />