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 相关文章推荐
Javascript学习笔记二 之 变量
Dec 15 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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 date与gmdate的获取日期的区别
2010/02/08 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python下Fabric的简单部署方法
2015/07/14 Python
python自定义异常实例详解
2017/07/11 Python
Python实现求数列和的方法示例
2018/01/12 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python安装scipy的步骤解析
2019/09/28 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
统计员岗位职责
2015/02/11 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书