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"> ...
随机推荐
- Qt::WindowFlags枚举类型（Qt::Widget是独立窗口和子窗口两用的，Qt::Window会有标题栏）
Qt::Widget : QWidget构造函数的默认值,如新的窗口部件没有父窗口部件,则它是一个独立的窗口,否则就是一个子窗口部件. Qt::Window : 无论是否有父窗口部件,新窗口部件都是一 ...
- BeagleBone Black第八课板：建立Eclipse编程环境
BBB第八课板:建立Eclipse编程环境 最近建立了一个新的编程环境.感觉很方便,给大家分享.除了先前BBB董事会远程桌面直接写shell脚本或C外部程序,经Debain 7.5根据该制度还试图用编 ...
- 关于提高UDP发送效率的方法
UDP的发送效率和什么因素有关呢? 直观觉得,UDP的切包长越大,应该发送效率越高(最长为65536).可是依据实际測试和在网上查到的资料的结果,包长度为1024为发送效率最高. 这样的结果让人感到疑 ...
- Android 悬浮窗、悬浮球开发
原文:Android 悬浮窗.悬浮球开发 1.权限管理 直接看我另外一篇博客吧,传送门: https://my.oschina.net/u/1462828/blog/1933162 2.Base类Ba ...
- 离散时间信号常见函数的实现（matlab）
1. 单位样本序列 δ(n−n0)={1,n=n00,n≠n0 function [x, n] = impseq(n0, n1, n2) n = n1:n2; x = [n == n0]; 2. 单位 ...
- 使用WPF技术模拟手机界面
原文:使用WPF技术模拟手机界面 1. 前言 WPF(Windows Presentation Foundation),即"Windows呈现基础",它的目的非常明确,就是用来把数 ...
- cocos2d-x 显示触摸操作(单击显示效果浪潮,对于视频演示)-绩效转型
http://blog.csdn.net/hitwhylz/article/details/26042751 首先是显示触摸操作. 在文章最后.对性能进行一些提升改造. 由于要演示我们的作品.使用试玩 ...
- mac 端安装JAVA开发环境
一.maven安装 下载地址 https://maven.apache.org/download.cgi 下载 apache-maven-3.5.2-bin-zip 将下载的文件放在某路径下 修改 ...
- Symbol not found: _lua_objlen
lua: error loading module 'cjson' from file '/usr/local/lib/lua/5.3/cjson.so': dlopen(/usr/local/lib ...
- glibc头文件和宏定义
头文件没啥好说的,无非就是" "和< >的区别,这估计只要是学过C/C++的人都明白.现在的编译器对头文件的包含顺序没有要求,但老的C实现则不一样.当然,我们现在无需关 ...