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

Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。

创新互联建站，为您提供成都网站建设公司、成都网站制作、网站营销推广、网站开发设计，对服务花箱等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

一、单选框

  在传统的HTML中实现单选框的方法如下：

 
 男 
 女 
 

注：这里name属性值必须相同，以确保同一时间只有一个能被选中。同时用于识别发送至服务器的数据；value值也很重要，当按钮被选中时，该值将发送给服务器；

用vue.js实现单选框比较方便，举例如下。我们不再需要name属性，只需要使用v-model指令给每个选项绑定同一个变量就可以确保同一时间只有一个被选中，同时value属性还是需要的，表示选中时的值。

 
 男 
 女 
 
已选：{{gender}}
 
 
 

二、复选框

  在传统的HTML中实现复选框代码如下：

 
 jack 
 bob 
 alice 
 

从以上代码可以看到：HTML中单选框和复选框的构造方法类似，只是type值变成checkbox，同时也用name和value表征一个复选框以及选中情况。

在vue.js中构造复选框也与单选框类似，只是每个选项框都用v-model绑定一个变量，这些变量一般放在一个对象中，或者为v-model绑定一个相同的属性名称，且属性为数组；针对这两种情况的举例如下：

使用v-model为每个选项框绑定一个变量：

 
 jack 
 bob 
 alice  
 
已选：{{person}}
 
 
 

从以上代码可以看到：这里已经不需要value属性，为每个属性绑定的值是boolean类型的，当选中时该值变为true，没选中为false；

给v-model绑定一个相同的数组类型的属性：

 
 jack 
 bob 
 alice  
 
已选：{{whom.join('|')}}
 
 
 

从代码中可以看到：为每个选项都绑定一个相同的数组名称，这里需要value属性，当被选中时，相应的value值会加入到数组中，取消选中时，删除数组中对应的value值。

三、下拉框

传统的用HTML构造下拉框的代码如下：

 
 A 
 B 
 C 
 

其中name用于发送给服务器时的数据识别，value为选中时发送给服务器的值。如果option中省略value，那么发送给服务器的值为option标签之间的值。

用vue2.0实现下拉框的方法如下：

 
  
  {{item.text}} 
  
 已选:{{selected}} 
 
 
 

从代码中可以看到，使用v-for指令，避免重复书写option标签，同时用v-bind指令绑定value属性。当选中某一项时，该选项的value值赋给selected变量。

不管是html书写，还是vue实现，如果需要实现多选下拉框，只需要在select标签中写入multiple属性(同时vue中，selected变量初始化为一个空数组)。

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