要通过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复选框获取值的补充的更多相关文章

  1. vue复选框选中值获取

    <div id="d5"> <p>{{box5.toString()}}</p> <input type="checkbox&q ...

  2. 获取url中的参数\+发送ajax请求根路径|+获取复选框的值

    //获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  3. Web版需求征集系统所得1，servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...

  4. 使用js获取复选框的值,并把数组传回后台处理，过程使用的是Ajax异步查询

    这是界面代码: ​ function shua(){             var id_array=new Array();         $('input[id="checkAll& ...

  5. mui开发中获取单选按钮、复选框的值

    js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...

  6. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  7. jquery怎样获取多个复选框的值？

    jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));    ...

  8. 在Servlet端获取html页面选中的checkbox值，request获取页面checkbox（复选框）值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  9. Vue复选框的全选

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

随机推荐

  1. visio（2013）绘图工具的使用

    1. 链接线 ⇒ 直线 visio2010中如何使画出来的连接线为直线 [设计面板] ⇒ 在最右端将[链接线]设置为直线: 2. 连接线交叉而不产生交叉桥(弯曲) visio2013画图时两条直线交叉 ...

  2. 使用Apache Tiles3.x构建界面布局

    Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Til ...

  3. 将gdal源码转化为VS工程编译过程记录

    作者:朱金灿 来源:http://blog.csdn.net/clever101 为什么要用VS工程的方式来编译gdal库?主要还是为了调试方便,虽然理论上使用命令行方式生成库也能调试,详见:GDAL ...

  4. sgu209：Areas(计算几何)

    意甲冠军: 给一些直.这架飞机被分成了很多这些线性块.每个块的需求面积封闭曲线图. 分析: ①我们应要求交点22的直线: ②每行上的交点的重排序,借此来离散一整行(正反两条边): ③对于连向一个点的几 ...

  5. VS2010设置VC6的字体样式及背景色、选中字高亮

    习惯了VC6.0的fixedsys字体,用VS2010还真不习惯.把VS2010打造成经典的.熟悉的模样,也并非难事.网上有相应的文章,我再记录下来,主要是为了自己查找方便(刚刚重装了系统,一切从头再 ...

  6. 使用Adorner显示WPF控件的边界点

    原文:使用Adorner显示WPF控件的边界点 当我们拖动WPF控件时,我们为了更清楚地需要显示控件,一般我们会在WPF控件所围成的矩形区域的四个边界点上作一个特殊的记号(比如圆点).如下图: 在Wi ...

  7. Linux性能测试 ps命令

    名称:ps 使用权限:所有使用者 使用方式:ps [options] [--help] 说明:显示瞬间行程 (process) 的动态 参数: ps 的参数非常多, 在此仅列出几个常用的参数并大略介绍 ...

  8. 大约laravel错误的解决方案

    2015-3-13 夜晚 9:13 执行laravel发生错误Indirect modification of overloaded element of BbsArticle has no effe ...

  9. VC6下深入理解new[]和delete[]（在多线程下new和delete的时候，必须选择上多线程库，不然可能造成进程崩溃）

    多少年了,一直处于C与C++混用的状态,申请空间一直用malloc,释放空间一直用free,为什么?因为他们好理解易操作,就如同输出一直用printf而不用<<,输入一直用scanf而不用 ...

  10. Coder-Strike 2014 - Finals (online edition, Div. 1)

    CF 420A  A. Start Up 题目链接: http://codeforces.com/problemset/problem/420/A 题目意思: 给一个字符串A,通过镜面反射后得到A', ...