要通过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. CCLink

    1什么是CC-Link? CC-Link全称Control & Communication Link,即控制与通信链路通信,是一种可以同时高速处理控制和信息数据的现场网络系统,可以提供高效.一 ...

  2. js 将json字符串转换为json对象

    要引入:jquery-json-2.4.js 在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如: JS ...

  3. FastDFS安装、配置、部署（三）－Storage配置具体解释

    1.基本配置 # is this config file disabled # false for enabled # true for disabled disabled=false # the n ...

  4. 2 DDD理论学习2 领域

    一个领域本质上可以理解为就是一个问题域,只要是同一个领域,那问题域就相同. 所以,只要我们确定了系统所属的领域,那这个系统的核心业务,即要解决的关键问题.问题的范围边界就基本确定了. 领域首先要拆分成 ...

  5. 【Quartz】定时器初步实验（一）

    原文:[Quartz]定时器初步实验(一)     以前就了解了Quartz这个定时框架,但是一直没有认真的去关注他,最近忽然看到已经更新到3.0.4支持异步操作了所以就写个简单的小例子看看好用不. ...

  6. html5中 table数据导出到excel文件

    JS代码: /** * table数据导出到excel * 形参 table : tableId ; * sheetName : 工作薄名 * fileName : 文件名 * linkId :隐藏的 ...

  7. ADT eclipse的几个快捷键

    智能内容感知 Alt+/ ,该快捷键可以方便的匹配我们使用的类信息,/ 在键盘上和?是同一个按键. ctrl+.及ctrl+1:下一个错误及快速修改 ctrl+.将光标移动至当前文件中的下一个报错处或 ...

  8. SQL Server数据库碎片整理

    碎片产生   在SQL Server中,存储数据的最小单位是页,每一页所能容纳的数据为8060字节.而页的组织方式是通过B树结构  SQL Server向每个页内存储数据的最小单位是表的行(Row)  ...

  9. MVC基架生成的Detele视图

    @model MyMusicStore.Models.Album @{     ViewBag.Title = "Delete"; } <h2>Delete</h ...

  10. WPF获取控件内部的ScrollViewer，并控制ScrollViewer操作

    //获取内部  ScrollViewer方法 public static T FindVisualChild<T>(DependencyObject obj) where T : Depe ...