vue.js如何實作單選框和複選框以及下拉框的範例分享

本篇文章主要介紹了vue.js實作單選框、複選框和下拉框範例，具有一定的參考價值，有興趣的小夥伴可以參考一下

Vue.js可以很方便的實作資料雙向綁定，所以在處理表單，人機互動方面具有很大的優勢。下邊以單選框、複選框和下拉框為例介紹他們在HTML和Vue.js中的具體實作方式。

一、單選框

  在傳統的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屬性值必須相同，以確保同一時間只有一個能被選取。同時用於識別發送至伺服器的資料；value值也很重要，當按鈕被選中時，該值將發送給伺服器；

用vue.js實作單選框比較方便，舉例如下。我們不再需要name屬性，只需要使用v-model指令給每個選項綁定同一個變數就可以確保同一時間只有一個被選中，同時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>

二、核取方塊

  在傳統的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中單選框和複選框的建構方法類似，只是type值變成checkbox，同時也用name和value表徵一個複選框以及選中情況。

在vue.js中建構複選框也與單選框類似，只是每個選項框都用v-model綁定一個變量，這些變量一般放在一個對像中，或者為v- model綁定一個相同的屬性名稱，且屬性為數組；針對這兩種情況的舉例如下：

#使用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>

從上述程式碼可以看到：這裡已經不需要value屬性，為每個屬性綁定的值是boolean型別的，當選取時該值變為true，沒選取為false；

給v-model綁定一個相同的陣列類型的屬性：

#

<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屬性，當被選取時，對應的value值會加入到陣列中，取消選取時，刪除陣列中對應的value值。

三、下拉方塊

傳統的用HTML建構下拉方塊的程式碼如下：

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

其中name用於傳送給伺服器時的資料識別，value為選取時傳送給伺服器的值。如果option中省略value，那麼傳送給伺服器的值為option標籤之間的值。

用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標籤，同時用v-bind指令綁定value屬性。當選取某一項時，該選項的value值賦給selected變數。

不管是html書寫，還是vue實現，如果需要實作多選下拉框，只需要在select標籤中寫入multiple屬性(同時vue中，selected變數初始化為一個空數組)。

以上是vue.js如何實作單選框和複選框以及下拉框的範例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！