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

更新时间：2017年07月18日 09:59:49 作者：Wang-ccnu

本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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 输入框输入值自动过滤特殊字符替换中问标点操作
这篇文章主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解vue中父子组件传递参数props的实现方式
这篇文章主要给大家介绍了在vue中，父子组件传递参数 props 实现方式，文章通过代码示例介绍的非常详细，对我们的学习或工作有一定的参考价值,需要的朋友可以参考下
2023-07-07
Vue使用epubjs电子书的教程详解
EPUB.js是一个基于JavaScript的库,用于从电子书中提取内容,这篇文章主要为大家详细介绍了vue如何使用epubjs实现电子书的功能,感兴趣的小伙伴可以学习一下
2023-11-11
五种Vue实现加减乘除运算的方法总结
这篇文章主要为大家详细介绍了五种Vue实现加减乘除运算的方法,文中的示例代码简洁易懂,对我们深入了解vue有一定的帮助,需要的可以了解下
2023-08-08
vue路由遍历生成复数router-link的例子
今天小编就为大家分享一篇vue路由遍历生成复数router-link的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue中使用vue-cli接入融云实现即时通信
这篇文章主要介绍了vue中使用vue-cli接入融云实现即时通信的相关资料,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue实现虚拟滚动的示例详解
虚拟滚动或者移动是指禁止原生滚动,之后通过监听浏览器的相关事件实现模拟滚动,下面小编就来和大家详细介绍一下vue实现虚拟滚动的示例代码,需要的可以参考下
2023-10-10
用VueJS写一个Chrome浏览器插件的实现方法
这篇文章主要介绍了用VueJS写一个Chrome浏览器插件的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
快速解决vue-cli在ie9+中无效的问题
今天小编就为大家分享一篇快速解决vue-cli在ie9+中无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解TypeScript+Vue 插件 vue-class-component的使用总结
这篇文章主要介绍了TypeScript+Vue 插件 vue-class-component的使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02