<!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. Centos7 安装php7.3 并扩展 MySQL、postgresql

    首先是安装需要的扩展文件 yum -y install freetype-devel yum -y install libpng-devel yum -y install libjpeg-devel ...

  2. php des 对称加解密类

    <?php header("Content-Type: text/html;charset=utf-8"); /** * des 对称加解密 */ class des { p ...

  3. ELK系列(7) - 测试环境下Logstash异常退出：block in multi_receive_encoded

    问题与分析 在本地测试无误后将ELK部署到了测试环境,结果第二天发现Logstash挂掉了,一开始以为是自动部署之类导致的问题.之后几天时间里Logstash总是会down掉,查看了下日志文件,发现报 ...

  4. hdfs-site.xml 基本配置参考

    配置参数: 1.dfs.nameservices 说明:为namenode集群定义一个services name 默认值:null 比如设置为:ns1 2.dfs.ha.namenodes.<d ...

  5. ansible 错误记录（1）

    基本环境:docker基于centos7 在docker里面安装ansible 不管是在root还是普通用户下执行 ansible all -m ping  都报如下错误: 172.20.1.1 | ...

  6. Vue学习手记02 - 路由

    1.项目  注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...

  7. P1964 【mc生存】卖东西

    P1964 [mc生存]卖东西 题解 很简单, 暴力 注意一个小点就好 代码 #include<iostream> #include<cstdio> #include<c ...

  8. SQL-W3School-函数：SQL MID() 函数

    ylbtech-SQL-W3School-函数:SQL MID() 函数 1.返回顶部 1. MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID( ...

  9. Hibernate 自动更新表出错 More than one table found in namespace

    报错:Caused by: org.hibernate.tool.schema.extract.spi.SchemaExtractionException: More than one table f ...

  10. jmeter 和 postman 提交 传输类型为 "multipart/form-data" 的传送写法

    Charles抓包: 请求参数Chrome抓包: jmeter写法: postman写法: 脚本的写法见 https://www.cnblogs.com/kaibindirver/p/9870900. ...