vue.js实现单选框、复选框和下拉框示例

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

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

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

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

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

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

<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="/UploadFiles/2021-04-02/vue.js">

从代码中可以看到，使用v-for指令，避免重复书写option标签，同时用v-bind指令绑定value属性。当选中某一项时，该选项的value值赋给selected变量。
不管是html书写，还是vue实现，如果需要实现多选下拉框，只需要在select标签中写入multiple属性(同时vue中，selected变量初始化为一个空数组)。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。