Dados de formulário de ligação bidirecional

1. Caixa de seleção

selectedNames é o valor do valor da caixa de seleção selecionada, os valores da matriz são organizados na ordem de seleção da caixa de seleção

// 多个复选框绑定到数组 
<div id = 'exemplo-3'> 
  <input type = "checkbox" id = valor "jack" = "Jack" v-modelo = "checkedNames"> 
  <label para = "jack"> Jack </label> 
  <input type = "checkbox" id = "john" value = "John" v-model = "selectedNames"> 
  <label for = "john"> John </label> 
  <tipo de entrada = "caixa de seleção" id = "mike" value = "Mike" v-model = "selectedNames"> 
  <label for = "mike"> Mike </label> 
  <br> 
  <span> Nomes verificados: {{selectedNames}} < / span> 
</div>novo Vue ({ 
  el: '# example-3' , 
  dados: { 
    selectedNames: [] 
  } 
})

 

2. botão de opção

O valor de saída escolhido é o valor do valor do botão de opção selecionado

<div id = "example-4"> 
  <input type = "radio" id = "one" value = "One" v-model = "picking"> 
  <label para = "one"> One </label> 
  <br > 
  <input type = "radio" id = "two" value = "Two" v-model = "picking"> 
  <label for = "two"> Dois </label> 
  <br> 
  <span> Selecionado: {{escolhido }} </span> 
</div> novo Vue ({ 
  el: '# example-4' , 
  dados: { 
    picking: '' 
  } 
})

 

3. caixa de seleção

1. Quando seleção única

selecionado é o valor da opção selecionada

Nota: Se  v-model o valor inicial da expressão falhar em corresponder a qualquer opção, o <select> elemento será renderizado como "não selecionado"

<div id = "example-5"> 
  <selecione v-model = "selected"> 
    <opção desabilitada valor = ""> 选择 选择 </option> 
    <opção> A </option> 
    <opção> B </option> 
    <opção> C </option> 
  </select> 
  <span> Selecionado: {{selected}} </span> 
</div> novo Vue ({ 
  el: '...' , 
  dados: { 
    selected: '' 
  } 
})

 

2. Quando seleção múltipla

O valor selecionado é a opção selecionada, a classificação na matriz é classificada de acordo com a opção, diferente da caixa de seleção de acordo com a ordem

<div id = "example-6"> 
  <selecione v-model = "selected" estilo múltiplo = "width: 50px;"> 
    <opção> A </option> 
    <opção> B </option> 
    <opção> C < / opção> 
  </select> 
  <br> 
  <span> Selecionado: {{selected}} </span> 
</div> novo Vue ({ 
  el: '# example-6' , 
  dados: { 
    selected: [] 
  } 
} )

 

3. Use v-for para renderizar rádio

A opção exibe texto e o que selecionamos é o valor. Exemplo:

<select v-model = "selected"> 
  <opção v- for = "opção nas opções" v-bind: value = "option.value"> 
    {{option.text}}
   </option> 
</select> 
<span > Selecionado: {{selected}} </span> novo Vue ({ 
  el: '...' , 
  dados: { 
    selected: 'A' , 
    opções: [ 
      {text: 'One', valor: 'A' }, 
      {texto: 'Dois', valor: 'B' }, 
      {texto: 'Três', valor: 'C' } 
    ] 
  } 
})