<!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. TensorFlow(二)：基本概念以及练习

    一:基本概念 1.使用图(graphs)来表示计算任务 2.在被称之为会话(Session)的上下文(context)中执行图 3.使用tensor表示数据 4.通过变量(Variable)维护状态 ...

  2. git命令如何删除文件或文件夹

    拉取远程仓到本地 git clone ×× cd ××× 查看分支 git branch -a 切换到想要操作的分支 git checkout 想要操作的分支 在本地仓库删除文件 git rm 我的文 ...

  3. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  4. Java学习日记基础篇（四）——类，对象之成员变量，成员方法，构造方法

    面向对象(Object Oriented) 一.面向对象杂谈 面向对象(Object Oriented),我的翻译是以物体为目标的,就是说编程的时候是建立一个物体,然后对这个物体进行操作. Java语 ...

  5. 2.线程--线程安全（synchronized）

    同步锁:synchronized,(缺点:不能手动开锁 解锁)   1.同步代码块 public void run(){ synchronized(this){/使用this关键字表示同一把锁,非静态 ...

  6. map判断

    返回的map对象在!=null的时候有两种情况,一种是没有数据 返回的是{},另外一种是有数据. 判断的时候map!=null&&!map.isEmpty()      

  7. Alpha项目冲刺！ Day2-产出

    各个成员今日完成的任务 林恩:任务分工,博客撰写,设计设置等模块 杨长元:学习安卓本地数据库建立 李震:如何写登录界面登录页面,如何下载模板 胡彤:连接服务端 寇永明:提供页面 王浩:提供页面 李杰: ...

  8. Linux中工作目录切换命令

    1.pwd命令用于显示当前的工作目录 2.cd命令用于切换工作路径,格式为:cd [目录名称] 参数 作用 - 切换到上一次的 目录,如:cd - ~ 切换到”家目录“,如:cd ~ ~usernam ...

  9. idea使用maven私服

    nexus3中央仓库改为阿里云/ 参考:这里写链接内容  找到中央仓库 然后修改成:  http://maven.aliyun.com/nexus/content/groups/public/   1 ...

  10. Mac使用brew安装nginx，并解决端口80访问权限问题

    1.安装 brew install nginx 2.修改配置文件 sudo vi /usr/local/etc/nginx/nginx.conf 修改默认的8080端口为80 修改日志文件地方 err ...