双方向バインディングフォームデータ

1.チェックボックス

checkedNamesは、選択したチェックボックスの値の値です。配列の値は、チェックボックスの選択順に配置されます。

// 複数の复选枠绑定到数组 
<div id = 'example-3'> 
  <input type = "checkbox" id = "jack" value = "Jack" v-model = "checkedNames"> 
  <label for = "ジャック">ジャック</ラベル> 
  の<input type = "チェックボックス" ID = "ジョン"値= "ジョン" Vモデル= "checkedNames"> 
  <ラベルのため = "ジョン">ジョン</ラベル> 
  の<input type = "チェックボックス" ID = "マイク"値= "マイク" Vモデル= "checkedNames"> 
  <ラベルのため = "マイク">マイク</ label>は
  <BR> 
  <スパン>チェック名：{{checkedNames}} < / span> 
</ div>新しいVue（{ 
  el： '＃example-3' 、
  data：{ 
    checkedNames：[] 
  } 
}）

 

2.ラジオボタン

選択された出力値は、選択したラジオボタンの値です。

<div id = "example-4"> 
  <input type = "radio" id = "one" value = "One" v-model = "picked"> 
  <label for = "one"> One </ label> 
  <br > 
  <input type = "radio" id = "two" value = "Two" v-model = "picked"> 
  <label for = "two"> Two </ label> 
  <br> 
  <span>選択済み：{{選択済み}} </ span> 
</ div> 新しいVue（{ 
  el： '＃example-4' 、
  data：{ 
    picked： '' 
  } 
}）

 

3.選択ボックス

1.単一選択の場合

selectedは選択されたオプション値です

注：  v-model 式の初期値がどのオプションとも一致しない場合、<select> 要素は「選択解除」としてレンダリングされます

<div id = "example-5"> 
  <select v-model = "selected"> 
    <option disabled value = "">请选择</ option> 
    <option> A </ option> 
    <option> B </ option> 
    <option> C </ option> 
  </ select> 
  <span>選択済み：{{選択済み}} </ span> 
</ div> 新しいVue（{ 
  el： '...' 、
  data：{ 
    選択済み： '' 
  } 
}）

 

2.複数選択の場合

選択された値は選択されたオプションであり、配列内のソートはオプションに従ってソートされ、チェックボックスとは異なる順序でソートされます

<div id = "example-6"> 
  <select v-model = "selected" multiple style = "width：50px;"> 
    <option> A </ option> 
    <option> B </ option> 
    <option> C < / option> 
  </ select> 
  <br> 
  <span>選択：{{選択}} </ span> 
</ div> 新しいVue（{ 
  el： '＃example-6' 、
  data：{ 
    選択：[] 
  } 
} ）

 

3. v-forを使用してラジオをレンダリングする

オプションにはテキストが表示され、選択したのは値です。例：

<select v-model = "selected"> 
  <option v- for = "option in options" v-bind：value = "option.value"> 
    {{option.text}}
   </ option> 
</ select> 
<span >選択済み：{{選択済み}} </ span> 新しいVue（{ 
  el： '...' 、
  データ：{ 
    選択済み： 'A' 、
    オプション：[ 
      {テキスト： 'One'、値： 'A' }、
      {テキスト： '2'、値'B' }、
      {テキスト： '三'、値'C' } 
    ] 
  } 
}）