Este artigo é um tutorial detalhado e mais abrangente compilado pelo editor em combinação com os documentos oficiais. É muito adequado para iniciantes aprender. Amigos interessados podem dar uma olhada!
A informação vem do documento oficial:
http://cn.vuejs.org/guide/forms.html
Formulário de ligação
① Métodos de ligação comuns:
【1】 Ligação da caixa de entrada de texto;
【2】 Ligação de textarea (semelhante a [1]);
【3】 Radio Selected Value Binding;
【4】 Caixa de seleção Ligação (matrizes de pacote automaticamente, nenhum nome necessário);
【5】 Selecione a ligação;
【6】 Selecione Múltiplas seleções de seleção da caixa de seleção;
【7】 Ligação dinâmica (os tipos acima, mas o mesmo valor pode interagir);
[8] Caixa de seleção selecionada e desmarcada recebem valores diferentes (principalmente para o estado desmarcado);
【9】 Caixa de seleção, rádio, Selecione Valores selecionados se vinculam dinamicamente (refere -se principalmente ao objeto ou atributo de ligação dinâmica do valor de uma instância da VM, como um determinado atributo nos dados ou um certo valor de calculado);
Como código:
<div id = "app"> <input type = "text" v-model = "text"/> <div> {{text}} </div> <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - value = "FirstCheckBox" v-Model = "Cadexes de seleção"> FirstCheckBox </elabel> <br/> <Beel> <input Type = "Checkbox" value = "SecondCheckBox" v-Model = "Checkboxes"> SecondCheckBox </Label> <br/> <bel = typ = "WhterBox"> "TercelCheckBox" <div> O valor selecionado acima é: {{caixa de seleção}} </div> <div> O valor selecionado acima é (exibido no formato JSON, o filtro json é usado aqui): {{Caixas de seleção | V-Model = "Radio"/> Value = a </crety> <br> <Boel> <input type = "Radio" value = "B" V-Model = "Radio"/> Value = B </Label> <br> <bring> {{Radio}}} </div> <div> Observe que o valor de V-Model deve ser registrado em dados, caso contrário, haverá um que haverá que haverá que haverá que haverá um número de dados que deve ser registrado em dados, que não deve ser registrado em dados, que deve ser registrado em dados, que deve ser registrado em dados, que deve ser registrado em dados, que deve ser registrado em dados, que deve ser registrado em dados, que não deve ser registrado em dados, que não deve ser registrado em dados, que não deve ser registrado em dados, que não deve ser registrado em dados, que deve ser registrado em dados, que deve ser registrado em dados. <div>---Selecione V-Model = "Select"> <pption> Valor padrão, a opção não define o valor </pption> <opção value = "b"> o valor do valor é definido como B </option> <opção selecionado = "c"> Seleção padrão, « <div> O mesmo, se você não se registrar aqui, você será relatado como um erro </div> ―, ―, ―, ―, ―, ―, ―, ―, ―, ―, ―, ―, ― - - - - - - - - - - - - - -)))))))) value = "a"> a </pption> <opção value = "b"> b </pption> <opção value = "c"> c </pption> <opção value = "d"> d </pption> <opção value = "e"> e </pption> </select> <div> o valor selecionado em seleção múltipla: {{múltiplo}} </div> </div> eixo y </div> <div> - - - - - - <label><input type="checkbox" value="B" v-model="Dynamic">B</label><br/> <label><input type="checkbox" value="C" v-model="Dynamic">C</label><br/> <select v-model="Dynamic" multiple> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <div>Select is: {{Dynamic}}</div> <div>――――――――――――――――――――――――――――――</div> <div>Custom checkbox for selected and selected values</div> <label><input type="checkbox" v-bind:true-value="differentValues.t" V-Bind: false-value = "DIFLIFERVALUES.F" V-MODEL = "DIFFERNAMENTO"> TRUE/FALSE </LABEL> <BR/> <Div> Valor diferente: {{diferente}} </div> <div> Observe que as opções acima não podem ser usadas como uma matriz como uma variável para a caixa de seleção múltipla V-Models, como as caixas de verificação ordinária, e seu valor é um certo, é uma variável de seleção, e as caixas de seleção e são as caixas de seleção, e sua traseira é uma variável para a caixa de seleção Vietim, e a traseira que não pode ser usada; Portanto, o valor em B-Bind não pode ser uma string, mas pode ser um objeto, como {a: 1} (é claro, o valor exibido neste momento também é um objeto) </div> <div> ―—-------"-Radio" V-Pind: 1 </belt> <brety> <input type = "Radio" v-bind: value = "textarea" v-model = "personalize"/> valor é 1 </creat> <div> {{personalize}} </div> <div> Da mesma forma, o valor pode ser uma propriedade de VM ou um objeto e selecionar também é válido. (Os três principais são selecionados. Além disso, embora o tipo de data também seja selecionado, não é muito significativo) </div> <div> - - - - - - themt -in -out de#{#####irapat). Textarea: "Aqui está o texto de várias linhas/n, // n é uma nova linha, mas é exibida como um espaço na string".②Add Parâmetros:
【1】 preguiçoso
O valor é atualizado somente após o cancelamento do estado de foco, e não quando a tecla é pressionada.
Válido para caixas de entrada de texto e textarea
Como código:
<input type = "text" v-model = "text" preguiçoso/> <div> {{text}} </div>【2】 Número
Converter automaticamente o valor de entrada em tipo de número e, se convertido em tipo NAN, ele retornará ao valor original;
Como código:
<input type = "text" v-model = "text" número/> <div> {{text}} </div> <div> {{typeof text}} </div>Se o número do parâmetro for adicionado, ao inserir um número, o tipo de prompt será string. Depois de adicioná -lo, o número puro solicitará o tipo de número;
【3】 Debounce = "milissegundos"
Quando o valor não muda para vários milissegundos em uma linha, a alteração do valor da variável é acionada;
Como código:
<input type = "text" v-model = "text" debounce = "1000"/> <div> {{text}} </div>Quando insiro os seis números 1, 2, 3, 4, 5, 6 em sequência com uma diferença de tempo de 500ms, o valor do texto não será atualizado;
Quando paro de entrar com 1000ms, o valor do texto será atualizado;
Portanto, é adequado para operações de alto consumo, como o AJAX.
O exposto acima é o exemplo de análise dos exemplos de VueJs e do elemento de formulário introduzido pelo editor para você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!