vue.js實現單選框、複選框和下拉框

標籤：bind   pre   --   需要   vue2   gen   情況   multi   服務   

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變數初始化為一個空數組)

vue.js實現單選框、複選框和下拉框