要通过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. ASP.NET中前台如何调用后台变量

    .Asp.Net中几种相似的标记符号: < %=...%>< %#... %>< % %>< %@ %>解释及用法 答: < %#... %> ...

  2. WPF MVVM系列文章

    网上搜到了MSDN Magazine上Laurent Bugnion的系列文章. 以下为关于WPF的优秀实践,很有必要阅读. 很吸引人的标题有: IOC Containers and MVVM Mes ...

  3. 简明Python3教程 3.介绍

    介绍 Python是少有的几种既强大又简单的编程语言.你将惊喜地发现通过使用Python即可轻松专注于解决问题而非和你所用的语言格式与结构. 下面是Python的官方介绍: Python is an ...

  4. malloc()与calloc差异

    Both the malloc() and the calloc() functions are used to allocate dynamic memory. Each operates slig ...

  5. 让你的Blend“编辑其他模板”菜单里出现你的Style

    原文:让你的Blend"编辑其他模板"菜单里出现你的Style 如图.. 昨天在做控件的时候遇到了一个新的要求,让美工可以在Blend里直接编辑自定义控件里子内容的模板.于是乎疯狂 ...

  6. VS中实时获取SVN的版本号并写入到AssemblyInfo.cs中(C#)

    原文:VS中实时获取SVN的版本号并写入到AssemblyInfo.cs中(C#) 在开发项目时,需要知道当前发布的到底是哪个版本,比较好的方式就是获取SVN的版本来作为项目的版本.项目版本一般由主版 ...

  7. ng-alain 复用标签相关设置

    排除复用 import { ReuseTabMatchMode, ReuseTabService } from '@delon/abc'; export class StartupService { ...

  8. GlyphRun 对象和 Glyphs 元素简介

    原文 GlyphRun 对象和 Glyphs 元素简介 GlyphRun 简介 Windows Presentation Foundation (WPF) 提供高级的文本支持包括直接访问的标志符号级标 ...

  9. QT Linux Demo程序编译

    我手上的qt源码包为:qt-everywhere-opensource-src-4.7.0.tar.gz 在Linux下编译比较容易,解压后直接 ./configure,一般会报缺少什么库这些.自己遇 ...

  10. IOS开发之delegate和Notification的区别

    delegate针对one-to-one关系,并且reciever可以返回值给sender: notification 可以针对one-to-one/many/none,reciever无法返回值给s ...