快捷導(dǎo)航

vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例

更新時(shí)間：2017年07月18日 09:59:49 作者：Wang-ccnu

本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue.js可以很方便的實(shí)現(xiàn)數(shù)據(jù)雙向綁定，所以在處理表單，人機(jī)交互方面具有很大的優(yōu)勢(shì)。下邊以單選框、復(fù)選框和下拉框?yàn)槔榻B他們?cè)贖TML和Vue.js中的具體實(shí)現(xiàn)方式。

一、單選框

在傳統(tǒng)的HTML中實(shí)現(xiàn)單選框的方法如下：

<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屬性值必須相同，以確保同一時(shí)間只有一個(gè)能被選中。同時(shí)用于識(shí)別發(fā)送至服務(wù)器的數(shù)據(jù)；value值也很重要，當(dāng)按鈕被選中時(shí)，該值將發(fā)送給服務(wù)器；

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

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

二、復(fù)選框

在傳統(tǒng)的HTML中實(shí)現(xiàn)復(fù)選框代碼如下：

<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中單選框和復(fù)選框的構(gòu)造方法類似，只是type值變成checkbox，同時(shí)也用name和value表征一個(gè)復(fù)選框以及選中情況。

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

使用v-model為每個(gè)選項(xiàng)框綁定一個(gè)變量：

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

從以上代碼可以看到：這里已經(jīng)不需要value屬性，為每個(gè)屬性綁定的值是boolean類型的，當(dāng)選中時(shí)該值變?yōu)閠rue，沒選中為false；

給v-model綁定一個(gè)相同的數(shù)組類型的屬性：

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

從代碼中可以看到：為每個(gè)選項(xiàng)都綁定一個(gè)相同的數(shù)組名稱，這里需要value屬性，當(dāng)被選中時(shí)，相應(yīng)的value值會(huì)加入到數(shù)組中，取消選中時(shí)，刪除數(shù)組中對(duì)應(yīng)的value值。

三、下拉框

傳統(tǒng)的用HTML構(gòu)造下拉框的代碼如下：

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

其中name用于發(fā)送給服務(wù)器時(shí)的數(shù)據(jù)識(shí)別，value為選中時(shí)發(fā)送給服務(wù)器的值。如果option中省略value，那么發(fā)送給服務(wù)器的值為option標(biāo)簽之間的值。

用vue2.0實(shí)現(xiàn)下拉框的方法如下：

<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指令，避免重復(fù)書寫option標(biāo)簽，同時(shí)用v-bind指令綁定value屬性。當(dāng)選中某一項(xiàng)時(shí)，該選項(xiàng)的value值賦給selected變量。

不管是html書寫，還是vue實(shí)現(xiàn)，如果需要實(shí)現(xiàn)多選下拉框，只需要在select標(biāo)簽中寫入multiple屬性(同時(shí)vue中，selected變量初始化為一個(gè)空數(shù)組)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: