收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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深入解析之render function code详解
前言最近在深入的学习研究vue,其实vue在使用上入门并没有什么太高的门槛,但前端同学们也不该仅仅停留在使用上。以vue设计、编码之优秀,足当抽

vue实现表格增删改查效果的实例代码
整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享。实现效果我们把这些用户信息保存到list的数组中,然后增删

Angularjs的启动过程分析
本文介绍了Angularjs的启动过程分析,分享给大家启动过程(v1.3.9)步骤一用自执行函数的形式让整个代码在加载完成之后立即执行inangular.jsLine6(function(wi

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号