zoukankan      html  css  js  c++  java
  • vue复选框获取值的补充

    要通过vue的v-model获取选中复选框的值,可以用遍历对象的方式获取,代码如下:

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title></title>
     6     <script src="../js/vue2.js"></script>
     7     <script src="../js/vue-resource.js"></script>
     8 </head>
     9 <body>
    10     <div id="app">
    11         <input type="checkbox" v-model="person.jack" value="jack" id="Jack" /><label for="Jack">jack</label>
    12         <input type="checkbox" v-model="person.bob" value="bob" id="Bob" /><label for="Bob">bob</label>
    13         <input type="checkbox" v-model="person.alice" value="alice" id="Alice" /><label for="Alice">alice</label>
    14         <p>已选:{{person}}</p>
    15         <div><button @click="show">显示</button></div>
    16         <p>结果:{{result.toString()}}</p>
    17     </div>
    18 
    19     <script>
    20         
    21 
    22         var app = new Vue({
    23             el: '#app',
    24             data: {
    25                 person: { jack: true, bob: true, alice: false },
    26                 result:[]//获取选中后的checkbox的数组值
    27             },
    28             methods: {
    29                 show: function () {
    30                     this.result = [];
    31                     for (var i in this.person) {
    32                         if (this.person[i] == true) {
    33                             this.result.push(i);
    34                         }
    35                     }
    36                 },
    37             },
    38         });
    39     </script>
    40 </body>
    41 </html>
  • 相关阅读:
    代理模式
    适配器模式
    策略模式
    原型模式
    内存溢出
    jvm常用参数
    单例模式
    抽象工厂
    工厂方法模式
    选择器代码
  • 原文地址:https://www.cnblogs.com/qkabcd/p/7414007.html
Copyright © 2011-2022 走看看