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


Posted in Javascript onJuly 18, 2017

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变量初始化为一个空数组)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
常用DOM整理
Jun 16 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
webpack external模块的具体使用
Mar 10 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 #Javascript
iscroll.js滚动加载实例详解
Jul 18 #Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 #Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 #Javascript
iscroll动态加载数据完美解决方法
Jul 18 #Javascript
Angular4学习笔记之新建项目的方法
Jul 18 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
举例讲解Python装饰器
2020/12/24 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
教师自荐书
2013/10/08 职场文书
前处理组长岗位职责
2014/03/01 职场文书
保险公司早会主持词
2014/03/22 职场文书
会计师事务所实习证明
2014/11/16 职场文书
员工离职感谢信
2015/01/22 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
致接力运动员加油稿
2015/07/21 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Python中requests库的用法详解
2022/06/05 Python