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"> ...
随机推荐
- Java SpringMVC实现国际化整合案例分析（i18n） 专题
所谓国际化就是支持多种语言,web应用在不同的浏览环境中可以显示出不同的语言,比如说汉语.英语等.下面我将以具体的实例来举例说明: (1)新建动态Javaweb项目,并导入几个SpringMVC必需的 ...
- 深度神经网络（DNN）
深度神经网络(DNN) 深度神经网络(Deep Neural Networks, 以下简称DNN)是深度学习的基础,而要理解DNN,首先我们要理解DNN模型,下面我们就对DNN的模型与前向传播算法做一 ...
- Codeforces 385 D Bear and Floodlight
主题链接~~> 做题情绪:时候最后有点蛋疼了,处理点的坐标处理晕了.so~比赛完清醒了一下就AC了. 解题思路: 状态压缩DP ,仅仅有 20 个点.假设安排灯的时候仅仅有顺序不同的问题.全然能 ...
- android模拟器上不了网的解决办法
Android模拟器默认的地址是10.0.2.3,默认的DNS也是10.0.2.3,对于在家里上网学习Android的人来讲,一般电脑的IP都是192.168.1.100之类的,不在同一个网段.所以就 ...
- Java--ConcurrentHashMap原理分析
一.背景: 线程不安全的HashMap 因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap. 效率低下的H ...
- uinty3d导入错误问题解决
导入第一被复制到文件unity3d在相应的文件夹的安装文件夹.回归后,unity3d软体.正确的选择"输入". 版权声明:本文博主原创文章.博客,未经同意不得转载.
- cocos2d-x 打开控制面板
于cocos2dx反过来,我们所熟悉的控制台输出,可以查看日志,例如C介面printf();性能. int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTA ...
- 跟我学ASP.NET MVC之十：SportsStrore安全
摘要: 在之前的文章中,我给SportsStore应用程序添加了产品管理功能,这样一旦我发布了网站,任何人都可能修改产品信息,而这是你必须考虑的.他们只需要知道你的网站有这个功能,以及功能的访问路径是 ...
- Hadoop源代码分析：HDFS读取和写入数据流控制(DataTransferThrottler类别)
DataTransferThrottler类别Datanode读取和写入数据时控制传输数据速率.这个类是线程安全的,它可以由多个线程共享. 用途是构建DataTransferThrottler对象,并 ...
- （转）总结：JavaScript异步、事件循环与消息队列、微任务与宏任务
前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: “JavaSc ...