método de escrita do modelo v
<input type="text" v-model="mag">
<div>{
{
mag}}</div>
data(){
return {
mag:'HELLO WORLD'
}
},
princípio do modelo v
Dividido em duas etapas:
1. v-bind vincula o atributo de valor
2. v-on vincula o 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)
}
}
caixa de seleção do modelo v (caixa de seleção)
cheque único
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{
{
checked }}</label>
data(){
return {
checked:true,
}
},
Várias caixas de seleção (recebidas com 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:[]
}
},
botão de opção modelo v (rádio)
<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:''
}
},
caixa de seleção do modelo v (Selecionar)
Escolha ú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',
}
},
Múltipla escolha
<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
.preguiçoso
Por padrão, o modelo v é atualizado em tempo real. Se você não quiser que ele seja atualizado em tempo real, você precisa adicionar o modificador .lazy. A função é atualizar quando o evento perder o foco.
<input v-model.lazy="mag" />
data(){
return {
mag:'mag'
}
},
.número
Se quiser converter automaticamente o valor de entrada do usuário em um tipo numérico, você pode adicionar o modificador de número ao modelo v
<input v-model.number="age" type="text" />
.aparar
Se quiser filtrar automaticamente os caracteres de espaço em branco iniciais e finais inseridos pelo usuário, você pode adicionar o modificador de corte ao modelo v:
<input v-model.trim="msg" />