vue复选框获取值的补充
要通过vue的v-model获取选中复选框的值，可以用遍历对象的方式获取，代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/vue2.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="person.jack" value="jack" id="Jack" /><label for="Jack">jack</label>
<input type="checkbox" v-model="person.bob" value="bob" id="Bob" /><label for="Bob">bob</label>
<input type="checkbox" v-model="person.alice" value="alice" id="Alice" /><label for="Alice">alice</label>
<p>已选：{{person}}</p>
<div><button @click="show">显示</button></div>
<p>结果：{{result.toString()}}</p>
</div> <script> var app = new Vue({
el: '#app',
data: {
person: { jack: true, bob: true, alice: false },
result:[]//获取选中后的checkbox的数组值
},
methods: {
show: function () {
this.result = [];
for (var i in this.person) {
if (this.person[i] == true) {
this.result.push(i);
}
}
},
},
});
</script>
</body>
</html>
vue复选框获取值的补充的更多相关文章
- vue复选框选中值获取
<div id="d5"> <p>{{box5.toString()}}</p> <input type="checkbox&q ...
- 获取url中的参数\+发送ajax请求根路径|+获取复选框的值
//获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...
- Web版需求征集系统所得1，servlet中获取checkbox复选框的值
servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...
- 使用js获取复选框的值,并把数组传回后台处理，过程使用的是Ajax异步查询
这是界面代码: function shua(){ var id_array=new Array(); $('input[id="checkAll& ...
- mui开发中获取单选按钮、复选框的值
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...
- iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
- jquery怎样获取多个复选框的值？
jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element)); ...
- 在Servlet端获取html页面选中的checkbox值，request获取页面checkbox（复选框）值
html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...
- Vue复选框的全选
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
随机推荐
- win10家庭版连接不上远程桌面
解决方案来自于:https://blog.csdn.net/weixin_39129504/article/details/80303615 这个解决方案的关键: done!不知是否侵权 如有侵权 ...
- quick-cocos2d-x游戏开发【8】——动画与动作
动画与动作,在quick中都有对其封装,所以我们还是来看一下吧. 总的来说,对于帧动画,quick封装的方法我们能够常常使用,这是很方便的,以下直接上代码来直观感受下, 比方,14张帧图片,採用coc ...
- 微信公众平台消息接口开发（2）你的服务器没有正确响应Token验证的解决方法
你的服务器没有正确响应Token验证,请阅读消息接口使用指南 微信 微信公众平台开发模式 平台 消息 接口 启用 URL Token作者:http://txw1958.cnblogs.com/ 本系统 ...
- 简明Python3教程 4.安装
如果你已经安装了Python 2.x,你不需要在安装Python 3.0前卸载Python 2.x.这两者可以共存. GNU/Linux用户和BSD用户 如果你使用类似于Ubuntu.Fedora.O ...
- iOS8的APP过渡过程
1. 2. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluX3hpYW53ZWk=/font/5a6L5L2T/fontsize/400/fill/ ...
- 神户制钢坑了500家企业 百年老店为何走上邪路?（企业经营再艰难，也不能降低产品质量，甚至偷工减料，同样适用于IT行业）
神户制钢这颗烂萝卜,拔出它之后带出的泥越来越多.上周五社长川崎博也又开了记者会,再次道歉,而受到其数据造假影响的客户数量也从200家飙升到500家. 日本政府给神户制钢两周时间调查,还要在一个月内公布 ...
- windows常用cmd指令
打开命令行 1.在菜单栏中搜索命令行 2.在文件管理器的Path栏输入cmd,则在当前目录打开命令行 3.Windows+R,输入cmd,回车 ping(网络诊断工具) ping是Windows.Un ...
- Stream转Byte数组
//获得当前文件目录 string rootPath = Directory.GetCurrentDirectory(); string path = rootPath + "Your Fi ...
- JPlayer-MP3播放器（带播放列表）
第一篇随笔,写的不好的地方,各位不要见笑.其他的也不多说了,下面是我在工作中用的一个基于JQuery开源的插件,官方地址:http://www.jplayer.org/.先看下要实现的效果图: 首先引 ...
- C# 不重启程序修改并保存配置文件（appSettings节点）
原文:C# 不重启程序修改并保存配置文件(appSettings节点) private static void UpdateAppConfig(string newKey, string newVal ...