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"> ...
随机推荐
- Managing uniquely tagged items using the internet
The invention teaches managing an item in the Internet of Things, wherein the system comprises: an i ...
- ie height
苦恼我许久了,为啥在IE中设置div的height属性无效呢... 在网上查了,常用解决是设置line-height或者设置overflow:hidden,不过我这个div用来定位的,一是里面没文字, ...
- git can't merge 的处理 代码冲突问题的解决
***取回已经提交的代码 git reset HEAD^ git can't merge 的处理1.git status 确保status 为空,可以先提交2.git reset HEAD^ 取 ...
- GIT 单个文件还原到历史版本号
首先检查在历史文件中的版本号信息:git log <file> 将文件还原到历史版本号:git reset 版本号 <file> 文档工作区的检测:git checkout - ...
- Method and apparatus for training a memory signal via an error signal of a memory
Described herein is a method and an apparatus for training a memory signal via an error signal of a ...
- 2 WCF里面配置的含义
1 首先介绍所谓的a,b,c. a就是address 地址: b binding 绑定的协议 譬如http tcp udp 利用这些协议方式请求address: c contract 代表请求的规 ...
- Angular常用指令
安装Node 先去Node官网下载并安装Node.js Install the Angular CLI(安装Angular CLI) npm install -g @angular/cli Creat ...
- GDI+ Bitmap与WPF BitmapImage的相互转换
原文:GDI+ Bitmap与WPF BitmapImage的相互转换 using System.Windows.Interop; //... // Convert BitmapImage to Bi ...
- golang并发编程的两种限速方法
引子 golang提供了goroutine快速实现并发编程,在实际环境中,如果goroutine中的代码要消耗大量资源时(CPU.内存.带宽等),我们就需要对程序限速,以防止goroutine将资源耗 ...
- 解决Android Studio运行时报Error:java.lang.NullPointerException (no error message)错误
原文:解决Android Studio运行时报Error:java.lang.NullPointerException (no error message)错误 ...