Uso básico
Você pode usar a diretiva V-Model para criar ligação de dados bidirecional nos elementos de controle de formulários. Ele seleciona automaticamente o método correto para atualizar o elemento de acordo com o tipo de controle. Embora um pouco mágico, o modelo V não passa de açúcar sintático, atualizando dados nos eventos de entrada do usuário e lidando com alguns exemplos extremos em particular.
Texto
<pan> A mensagem é: {{message}} </span> <br> <input type = "text" v-model = "message" standholder = "editar me">Caixa de seleção
Caixa de seleção única, valor lógico:
<entrada de entrada = "caixa de seleção" id = "caixa de seleção" v-model = "checked"> <etiqueta para = "caixa de seleção"> {{checked}} </celt>Várias caixas de seleção, ligadas à mesma matriz:
<input type = "caixa de seleção" id = "jack" value = "jack" v-model = "checkedNames"> <etiqueta para = "jack"> jack </elabel> <input type = "caixa de seleção" id = "john" value = "John" vodel = "checkDNames"> <bel para = "" "> john = </etc." <ing type = " V-Model = "CheckedNames"> <Label para = "Mike"> Mike </celt> <br> <bran> Nomes verificados: {{CheckedNames | json}} </span> new vue ({el: '...', dados: {checkedNames: []}})Rádio
<input type = "Radio" id = "One" value = "One" V-Model = "Picked"> <Label para = "One"> One </Label> <br> <input type = "Radio" id = "dois" value = "dois" V-Model = "Picked"> <Label para = "dois"> dois </cret> <bra> <bring> Picked: {Picked "> </" dois "> dois </)Selecione
Única escolha:
<select V-Model = "Selected"> <Opção selecionado> A </pption> <pution> B </pption> <pution> c </pption> </leclect> <pan> selecionado: {{selecionado}} </span>Múltipla escolha (vincular a uma matriz):
<Selecione V-Model = "Selecionado" Multiple> <Opção selecionado> a </pption> <pution> b </pption> <pption> c </pption> </leclect> <br> <bran> selecionado: {{selecionado | json}} </span>Opções dinâmicas, renderizar com V-For:
<Selecione V-Model = "Selected"> <Opção V-For = "Opção em Opções" V-Bind: Value = "Option.Value"> {{Option.Text}} </pption> </select> </span> Selecionado: {{Selected}} </span> new vue ({el: '...', dados: {selecionado: 'a', opções: [{text: 'One', value: 'a'}, {text: 'dois', value: 'b'}, {text: 'três', valor: 'c'}]}})Valor de ligação
Para botões de rádio, caixas de seleção e opções de caixa, o valor ligado por v-model geralmente é uma string estática (um valor lógico para caixas de seleção):
<!-Quando selecionado, `escolhido` é a string" a "-> <input type =" radio "v-model =" picked "value =" a "> <!-` altern "é verdadeiro ou false-> <input Type =" Caixa de seleção "V-Model =" Toggle "> <! value = "abc"> abc </pption> </leclect>
Mas às vezes queremos vincular o valor a uma propriedade dinâmica da instância do VUE, que pode ser implementada usando o V-Bind, e o valor dessa propriedade pode não ser uma string.
Caixa de seleção
<input type = "Caixa de seleção" v-model = "alternar" v-bind: true-value = "a" v-bind: false-value = "b"> // quando selecionado vm.toggle === vm.a // quando não selecionado vm.toggle === VM.B
Rádio
<input type = "radio" v-model = "pick" v-bind: value = "a"> // Quando selecionado vm.pick === vm.a
Selecione opções
<select V-Model = "Selected"> <!-Object literal-> <Opção v-bind: value = "{Número: 123}"> 123 </pption> </leclect> // Quando selecionado Typeof vm.Selected //-> 'object'vm.Selected.number //-> 123Características dos parâmetros
preguiçoso
Por padrão, V-model sincroniza os valores e dados da caixa de entrada no evento de entrada. Você pode adicionar um recurso com preguiça de sincronizar no evento de mudança:
<!-Atualizar no evento "Mudar" em vez de "entrada"->
<input v-model = "msg" preguiçoso>
número
Se você deseja converter automaticamente a entrada do usuário em tipo de número (retorne ao valor original se o resultado da conversão do valor original for NAN), você poderá adicionar um número de recurso:
<input v-model = "idade" número>
Debounce
Debounce define um atraso mínimo, atrasando o valor da caixa de entrada e os dados após cada toque. É útil se você precisar executar operações de alto consumo a cada atualização (como solicitação AJAX em um prompt de entrada).
<input v-model = "msg" debounce = "500">
Observe que o parâmetro Debounce não atrasa o evento de entrada: atrasa "escrever" os dados subjacentes. Portanto, ao usar o debounce, a vm. $ Watch () deve ser usada para responder a alterações nos dados. Se você deseja adiar o evento DOM, use o filtro de debounce.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.