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"> ...
随机推荐
- ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 用户注册 上一章节我们终于迁移完了 Identity 的数据,也创建 ...
- ATS项目更新(2) 命令行编译Studio解决方案
1: rem "D:\Microsoft Visual Studio 8\SDK\v2.0\Bin\sdkvars.bat" 2: D: 3: cd ..\..\..\..\..\ ...
- 调用FileSystemObject.CopyFile发生没有权限的错误
作者:朱金灿 来源:http://blog.csdn.net/clever101 最近编写一个JScript,在调用FileSystemObject.CopyFile发生没有权限的错误,具体如下图: ...
- Matlab随笔之插值与拟合（下）
原文:Matlab随笔之插值与拟合(下) 1.二维插值之插值节点为网格节点 已知m x n个节点:(xi,yj,zij)(i=1…m,j=1…n),且xi,yi递增.求(x,y)处的插值z. Matl ...
- 关于fastjson用法
fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发. public static final String toJSONString(Obje ...
- Binding的三种方式
1 Text="{Binding Name}" Name为后台的属性 2 Text="{Binding ElementName=XXX,Path=A.B.C.D….}&q ...
- HALCON学习之算子大全
1.1 Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一个训练样本添加到一个高斯混合模型的训练数据上. 2.classify_class_gmm ...
- 漫谈 JVM —— 内存
JVM 是什么呢?说的直白点就是 Java 代码运行的地方,全称 Java Virtural Machine,Java 虚拟机.有的人就会奇怪了,为什么 Java 程序员需要了解这个东西?毕竟大多数情 ...
- ELINK编程器支持芯片详细列表
支持MCU芯片包括:STM32 F0.F1.F2.F3.F4.L0.L1全系列: GD32 F10XX系列. 各系列芯片支持详情如下:
- WPF中的多进程(Threading)处理实例(二)
原文:WPF中的多进程(Threading)处理实例(二) //错误的处理 private void cmdBreakRules_Click(object sender, RoutedEventArg ...