要通过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. Android中使用JUnit测试

    package com.meritit.lottery.test; import java.util.List; import android.test.AndroidTestCase; import ...

  2. Windows10的Ubuntu子系统开启桌面环境

    原文:Windows10的Ubuntu子系统开启桌面环境 Ubuntu 优势之一就是桌面环境比较好,所以咱们的子系统当然也不能少了这一环节,本小结开始安装Ubuntu 桌面系统. 安装环境 使用下面指 ...

  3. A熟知SP.NET---WebForms UnobtrusiveValidationMode 必须“jquery”ScriptResourceMapping。

    我相信,有过ASP.NET人们学习经验RequiredFieldValidator控制(验证非空控制)一定不会陌生,禁止控制输入定义的内容的作用(该属性InitialValue的值.属性默认值为空字符 ...

  4. Linux 获得了其首款基于 RISC-V 的多核开源处理器

    去年,硅谷创业公司 SiFive 发布了首款开源 SoC(片上系统 System on a Chip),命名为 Freeform Everywhere 310.现在,该公司从嵌入式系统领先一步,发布了 ...

  5. debian9 安装 odoo11 笔记用 部分内容转载前辈的，在此感谢

    1先创建个odoo用户 sudo adduser odoo 2:给root 权限: sudo vi /etc/sudoers 修改文件参考如下: # User privilege specificat ...

  6. WPF中ListBox滚动时的缓动效果

    原文:WPF中ListBox滚动时的缓动效果 上周工作中遇到的问题: 常规的ListBox在滚动时总是一格格的移动,感觉上很生硬. 所以想要实现类似Flash中的那种缓动的效果,使ListBox滚动时 ...

  7. Google CFO 辞职信

    Google CFO 辞职信   After nearly 7 years as CFO, I will be retiring from Google to spend more time with ...

  8. Math.Round四舍五入说明

    Math.Round默认采用的不是四舍五入法, 而是四舍六入的银行家算法, 如何找回四舍五入法? Math.Round默认采用的不是四舍五入法, 而是四舍六入的银行家算法,  也就是四舍六入五考虑,五 ...

  9. WPF编游戏系列 之五 数据绑定

    原文:WPF编游戏系列 之五 数据绑定        在上一篇通过用户控件将重复使用的控件封装为一个控件组,大大减少了C#代码数量,本篇继续对该控件组进行数据绑定,节省为每个控件赋值的工作.对于数据绑 ...

  10. Converter

    public class ImgPathConvert : IValueConverter { public object Convert(object value, Type targetType, ...