vue.js がラジオ ボタン、チェック ボックス、ドロップダウン ボックスを実装する方法の例の共有

この記事では主に vue.js でラジオ ボタン、チェック ボックス、ドロップダウン ボックスを実装する方法の例を紹介します。興味のある方は参考にしてください。

Vue.js は双方向のデータ バインディングを簡単に実装できます。 , そのため、フォームの処理や人間とコンピューターの対話において大きな利点があります。以下では、例としてラジオ ボタン、チェック ボックス、ドロップダウン ボックスを使用して、HTML および Vue.js での具体的な実装を紹介します。

1. ラジオ ボタン

従来の HTML でラジオ ボタンを実装する方法は次のとおりです:

<p id="app"> 
 <input type="radio" name="gender" value="man" id="man"/><label for="man">男</label> 
 <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label> 
</p>

注: ここでの name 属性値は、確実に 1 つだけであることを保証するために同じである必要があります。も同時に選択できます。サーバーに送信されるデータを識別するためにも使用されます。ボタンが選択されると、値がサーバーに送信されます。

を実装するのがより便利です。たとえば、次のようにラジオボタンボックス。 name 属性はもう必要ありません。v-model ディレクティブを使用して同じ変数を各オプションにバインドするだけで、同時に 1 つだけが選択されるようになります。同時に value 属性も必要です。選択すると値が表示されます。

<p id="app"> 
 <label>男<input type="radio" v-model="gender" value="man"/></label> 
 <label>女<input type="radio" v-model="gender" value="woman"/></label> 
 <p>已选：{{gender}}</p><!--如果用原生js实现此功能比较麻烦--> 
</p> 
<script> 
 var app=new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   gender:&#39;&#39; 
  } 
 }); 
</script>

2. チェックボックス

従来の HTML でチェックボックスを実装するコードは次のとおりです:

<p id="app"> 
 <input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label> 
 <input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label> 
 <input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label> 
</p>

上記のコードからわかるように、ラジオ ボタンとチェック ボックスHTML ボックスの構築方法は似ていますが、タイプの値がチェックボックスになる点と、名前と値がチェック ボックスとその選択状態を表すためにも使用される点が異なります。

vue.js でのチェック ボックスの構築は、各オプション ボックスが v-model を使用して変数にバインドされることを除いて、ラジオ ボタンに似ています。これらの変数は通常、オブジェクト内に配置されるか、同じ属性名にバインドされます。 、属性は配列です。これら 2 つの状況の例は次のとおりです:

v-model を使用して変数を各オプション ボックスにバインドします:

<p id="app"> 
 <label>jack<input type="checkbox" v-model="person.jack"/></label> 
 <label>bob<input type="checkbox" v-model="person.bob"/></label> 
 <label>alice <input type="checkbox" v-model="person.alice"/></label> 
 <p>已选：{{person}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   person: {jack: false, bob: false, alice: false} 
  } 
 }) 
</script>

上記のコードからわかるように、次のようになります。各属性にバインドされる値はブール型であり、選択されていない場合は false になります。

同じ配列型の属性を v- にバインドします。モデル:

<p id="app"> 
 <label>jack<input type="checkbox" v-model="whom" value="jack"/></label> 
 <label>bob<input type="checkbox" v-model="whom" value="bob"/></label> 
 <label>alice <input type="checkbox" v-model="whom" value="alice"/></label> 
 <p>已选：{{whom.join(&#39;|&#39;)}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   whom: [] 
 } 
 }) 
</script>

コードからわかるように、各オプションは同じ配列名にバインドされています。選択すると、対応する value 値が配列に追加されます。配列内の対応する値が削除されます。

3. ドロップダウン ボックス

HTML を使用してドロップダウン ボックスを構築するための従来のコードは次のとおりです:

<select name="selected"> 
 <option value="a">A</option> 
 <option value="b">B</option> 
 <option value="c">C</option> 
</select>

ここで、名前はサーバーに送信されるときにデータの識別に使用されます。値が選択されると、値がサーバーに送信されます。オプションで値を省略した場合、サーバーに送信される値はオプションタグ間の値になります。

vue2.0でドロップダウンボックスを実装する方法は以下の通りです。

<p id="app"> 
 <select v-model="selected"> 
  <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option> 
 </select> 
 <span>已选:{{selected}}</span> 
</p> 
<script src="vue.js"></script> 
<script> 
 new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   items:[{text:&#39;A&#39;,value:&#39;a&#39;},{text:&#39;B&#39;,value:&#39;b&#39;},{text:&#39;C&#39;,value:&#39;c&#39;}], 
   selected:&#39;&#39; 
  } 
 }); 
</script>

コードからもわかるように、v-for命令を使ってoptionタグの繰り返し記述を避け、 value 属性をバインドする v-bind 命令。項目が選択されると、オプションの値が選択された変数に割り当てられます。

HTML で書かれているか、Vue で実装されているかに関係なく、複数選択ドロップダウン ボックスを実装する必要がある場合は、select タグに multiple 属性を記述するだけです (同時に、Vue では、選択された変数は空の配列に初期化されます)。

以上がvue.js がラジオ ボタン、チェック ボックス、ドロップダウン ボックスを実装する方法の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。