<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--checkbox单选框-->
        <label for="agree"></label>
        <input type="checkbox" id="agree" v-model="isagree">同意协议
        <p>你选择的是：{{isagree}}</p>
        <button :disabled="!isagree">下一步</button>
        <br>

        <!--checkbox多选框-->
        <input type="checkbox" value="篮球" v-model="bobby">篮球
        <input type="checkbox" value="足球" v-model="bobby">足球
        <input type="checkbox" value="乒乓球" v-model="bobby">乒乓球
        <input type="checkbox" value="排球" v-model="bobby">排球
        <h2>你的爱好是：{{bobby}}</h2>
    </div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            isagree:true,
            bobby:[]   /*多选框对应的是数组类型*/
        },
        methods:{

        }
    })
</script>
</body>
</html>

v-CheckBox的更多相关文章

  1. 【转】Android：ListView常见错位之CheckBox错位

    原文网址:http://blog.csdn.net/lemon_tree12138/article/details/39337867 ListView在什么样的情况下会出现错位?错位的原因是什么?怎么 ...

  2. CheckBox in ListView

    CheckBox in ListView Listview 在android中是经常用的组件,一些特殊情况下,系统提供的list view item 不够用, 不能满足需求,那么就需要自定义listV ...

  3. Android 控件：CheckBox

    首先,在布局文件里注冊CheckBox activity_main.xml <LinearLayout xmlns:android="http://schemas.android.co ...

  4. Android中ListView结合CheckBox判断选中项

    本文主要实现在自定义的ListView布局中加入CheckBox控件,通过判断用户是否选中CheckBox来对ListView的选中项进行相应的操作.通过一个Demo来展示该功能,选中ListView ...

  5. jQuery—常用操作

    一.jquery各版本变化 1.3:增加live(),为当前和将来增加的元素绑定事件 1.4:增加delegate().undelegate(),替代live(),可以遍历绑定 1.6:2个破坏性变更 ...

  6. Django （2）

    一.Django基本   程序编写 a. url.py        /index/    ->   func b. views.py def func(request):     # 包含所有 ...

  7. 神奇的CSS3按钮特效

    点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...

  8. ASP.NET MVC异步上传文件

    自己做的一个小dome.贴出来分享一下: 前端: <form id="formfile" method="post" enctype="mult ...

  9. 支持多选的Spinner控件

    概述 当我们要做单选功能的时候,我们会很自然的想到Spinner,它可以在一个集合中选择一个我们需要的值.但是有时候我们需要在一个集合中选择多个值,这个时候Spinner就不能满足需求.此时可以根据自 ...

  10. Android初体验

    上文提到使用genymotion来运行android项目,结果却是令人失望,我这边使用的是代理账户,尽管我在Setting中配置了代理,还是不能登录我注册的账户,郁闷,于是本文采用的是我自己的手机作为 ...

随机推荐

  1. simcom7600ce-t LBS function

    Welcome to minicom 2.7 OPTIONS: I18n Compiled on Nov 15 2018, 20:20:38.Port /dev/ttyUSB2, 00:55:23 P ...

  2. 用混入的方法引入vuex，并且解决vuex刷新页面值丢失的问题

    前段时间,做了个官网项目,客户要求将首页的域名后面的参数去除干净,然后就把#去掉了,一转脸,客户让去掉子页面地址栏上的参数,这很棘手,因为子页面的内容是根据子页面地址栏上的参数而定的,如果要去掉这些参 ...

  3. jsp 页面 javax.servlet.jsp.JspException cannot be resolved to a type 异常

    <dependencies><dependency><groupId>javax.servlet</groupId><artifactId> ...

  4. php关于mysql长连接问题

    1.当 函数 mysql_connect 的前三个参数(server username password)相同,并且第四个参数(new_link)不传递时候,重复调用 mysql_connect 是会 ...

  5. 1827：【01NOIP提高组】Car的旅行路线

    哇这些真题终于正经起来奥 刚看这道题很不自信觉得自己肯定不能建图成功甚至想过用贪心.. 后来一想发现建图还是蛮容易的,AI我是真的蠢 话说一本通真的很坑啊,把原题的保留1位改成了2 我把在洛谷AC的代 ...

  6. Spring Cloud Gateway（三）：网关处理器

    1.Spring Cloud Gateway 源码解析概述 API网关作为后端服务的统一入口,可提供请求路由.协议转换.安全认证.服务鉴权.流量控制.日志监控等服务.那么当请求到达网关时,网关都做了哪 ...

  7. Web安全测试 — 手工安全测试方法&修改建议

    常见问题 1.XSS(CrossSite Script)跨站脚本攻击 XSS(CrossSite Script)跨站脚本攻击.它指的是恶意攻击者往Web 页面里插入恶意 html代码,当用户浏览该页之 ...

  8. SpringBoot表单数据校验

    Springboot中使用了Hibernate-validate作为默认表单数据校验框架 在实体类上的具体字段添加注解 public class User { @NotBlank private St ...

  9. angular 中的[ngClass]、[ngStyle]

    <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> </ ...

  10. 002-创建型-01-工厂方法模式（Factory Method）

    一.概述 定义一个创建对象的接口,但让实现这个接口的类来决定实例化那个类,工厂方法让类的实例化推迟到子类中进行. 工厂方法模式(FACTORY METHOD)同样属于一种常用的对象创建型设计模式,又称 ...