<!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. [TJOI2013]奖学金 乱搞

    [TJOI2013]奖学金 乱搞 从\(c\)个二元组\((v,w)\)中选出\(n\)个,使其\(v\)的中位数最大的同时使\(w\)和小于等于\(f\),求这个中位数 有点意思.有点像二分答案的思 ...

  2. MySql通过Data恢复数据库数据

    公司的服务器开不了机,把硬盘装在其他机器上面,文件是没有丢失,可是数据库开不了了.上网查了下,用DATA恢复了数据. 1.先通过MYSQL目录下的my.ini配置文件找到 datadir的文件夹地址. ...

  3. meshing-八分之一圆球

    ​原视频下载地址:https://yunpan.cn/cqwiFDCg6PbFj  访问密码 d1c8

  4. @AUTORELEASEPOOL

    Swift 在内存管理上使用的是自动引用计数 (ARC) 的一套方法,在 ARC 中虽然不需要手动地调用像是 retain,release 或者是 autorelease 这样的方法来管理引用计数,但 ...

  5. ES索引文件和数据文件大小对比——splunk索引文件大小远小于ES，数据文件的压缩比也较ES更低，有趣的现象：ES数据文件zip压缩后大小和splunk的数据文件相当！词典文件tim/tip+倒排doc/pos和cfs文件是索引的大头

    和splunk对比: ES中各个倒排索引文件的分布: 测试说明:ES2.41版本,数据使用500次批量插入,每批数据都不同,大小500条,每条数据50个字段,对应的字符串使用长度为1-10个单词随机生 ...

  6. SQL SERVER 从其它数据库中复制带自增ID主键的表数据

    SQL SERVER两个结构相同(或不同)的表,互相导入数据,方法有两种: 1.使用SQL SERVER 自带的导出.导入功能,在库名上右击,“任务”,导出数据.导入数据,这个操作具体不就不多讲了. ...

  7. qt 创建程序目录

    voidinitDir() { QStringuserFilePath=QStandardPaths::writableLocation(QStandardPaths::DocumentsLocati ...

  8. MIPS 指令集(共31条）

    MIPS 指令集(共31条) MIPS 指令集(共31条) 助记符 指令格式 示例 示例含义 操作及其解释 Bit # 31..26 25..21 20..16 15..11 10..6 5..0 R ...

  9. BitmapFactory: 通过Bitmap的getWidth和getHeight方法获取到的尺寸与实际尺寸不符的问题

    问题 今天无意中发现了一个问题,通过Bitmap的getWidth和getHeight方法获取到的图片尺寸与实际的尺寸(1920*1080)不一致,后来更进一步发现,把这张图片分别放在raw.draw ...

  10. SQL-W3School-函数：SQL LAST() 函数

    ylbtech-SQL-W3School-函数:SQL LAST() 函数 1.返回顶部 1. LAST() 函数 LAST() 函数返回指定的字段中最后一个记录的值. 提示:可使用 ORDER BY ...