要通过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. Managing uniquely tagged items using the internet

    The invention teaches managing an item in the Internet of Things, wherein the system comprises: an i ...

  2. 在JScript中使用正则表达式

    作者:朱金灿 来源:http://blog.csdn.net/clever101 不废话了,直接用代码说明吧: main(); function main() { try { // 运用正则表达式进行 ...

  3. 《深入浅出WPF》笔记——模板篇

    原文:<深入浅出WPF>笔记--模板篇 我们通常说的模板是用来参照的,同样在WPF中,模板是用来作为制作控件的参照. 一.认识模板 1.1WPF菜鸟看模板 前面的记录有提过,控件主要是算法 ...

  4. Android官方教程翻译（5）——设置ActionBar

    Setting Up the Action Bar 设置Action Bar PREVIOUSNEXT THIS LESSONTEACHES YOU TO 这节课教你 1.    Support An ...

  5. c语言学习笔记（5）——进制

    进制 1.什么叫进制?  逢n进1: 2.把r进制转成十进制 a*r^0+b*r^1+c*r^2..... 3.把十进制转成r进制 185----->(r进制) 185不停的除r取余,最后把余数 ...

  6. C# WPF QQ新消息托盘悬浮窗效果实现

    原文:C# WPF QQ新消息托盘悬浮窗效果实现 今天在做一个项目的时候需要这么一个效果,但是网上找了一会发现并没有现成的给我参考(复制),但是呢,我千(到)辛(处)万(抄)苦(袭)想(复)破(制)头 ...

  7. 新浪微博Python客户端接口OAuth2

    Keyword: Python Oauth2 微博 sina weibo #!/usr/bin/env python # -*- coding: utf-8 -*- __version__ = '1. ...

  8. matlab 三维图像的绘制

    1. 基本绘图函数 plot3() scatter3() 2. 修饰与点缀 但仅使用默认的配置,调用这些绘图函数,不会很丑,但也漂亮不到哪里去. view(az, el),调整视野和视角:

  9. install windows service

    install windows serivce e.g @echo offecho ---------------------------------------------------------- ...

  10. Expression Blend学习动画基础

    原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化.最常见的是flash的动画,还有GIF动态图片. 动画的主要元素 时 ...