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；
給v-model綁定一個相同的數組類型的屬性：
<div 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('|')}}</p> </div> <script> var app = new Vue({ el: '#app', 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實現下拉框的方法如下：
<div id="app"> <select v-model="selected"> <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option> </select> <span>已選:{{selected}}</span> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}], selected:'' } }); </script> 從代碼中可以看到，使用v-for指令，避免重復書寫option標簽，同時用v-bind指令綁定value屬性。當選中某一項時，該選項的value值賦給selected變量。
不管是html書寫，還是vue實現，如果需要實現多選下拉框，只需要在select標簽中寫入multiple屬性(同時vue中，selected變量初始化為一個空數組)。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
