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

一、單選框

  在傳統的HTML中實現單選框的方法如下：

<div 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> </div> 

注：這里name屬性值必須相同，以確保同一時間只有一個能被選中。同時用于識別發送至服務器的數據；value值也很重要，當按鈕被選中時，該值將發送給服務器；

用vue.js實現單選框比較方便，舉例如下。我們不再需要name屬性，只需要使用v-model指令給每個選項綁定同一個變量就可以確保同一時間只有一個被選中，同時value屬性還是需要的，表示選中時的值。

<div 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實現此功能比較麻煩--> </div> <script>  var app=new Vue({   el:'#app',   data:{    gender:''   }  }); </script> 

二、復選框

  在傳統的HTML中實現復選框代碼如下：

<div 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> </div> 

從以上代碼可以看到：HTML中單選框和復選框的構造方法類似，只是type值變成checkbox，同時也用name和value表征一個復選框以及選中情況。

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

使用v-model為每個選項框綁定一個變量：

<div 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> </div> <script>  var app = new Vue({   el: '#app',   data: {    person: {jack: false, bob: false, alice: false}   }  }) </script> 

從以上代碼可以看到：這里已經不需要value屬性，為每個屬性綁定的值是boolean類型的，當選中時該值變為true，沒選中為false；