<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

    <h1>表单复选框</h1>

    <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">

    <label for="生化危机7">生化危机7</label>

    <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">

    <label for="模拟飞行">模拟飞行</label>

    <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">

    <label for="塞尔达传说">塞尔达传说</label>

    <br>

    <p>您选择的游戏是: {{ checkedGames }}</p>

</div>

<script>

    var myApp = new Vue({

        el: '#myApp',

        data: {

            checkedGames: []

        },

        methods: {

        },

    });

</script>

</body>

</html>

表单复选框input[type="checkbox"]的更多相关文章

  1. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  2. AngularJS（六）：表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  3. SpringMVC 表单复选框处理

    <form action="" method="post"> <c:forEach items="${dblist}" v ...

  4. python selenium单/复选框操作

    一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...

  5. 复选框input:checkbox

      复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...

  6. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  7. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  8. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

  9. 工作需求----表单多选框checkbox交互

    关于多选框,反选及选取几个: 1.html内容 <!--begin checkbox--> <div class="c_n_manage_tablexx"> ...

随机推荐

  1. LA 3263 /// 欧拉定理 oj21860

    题目大意: n个端点的一笔画 第n个和第1个重合 即一笔画必定是闭合曲线 输出平面被分成的区域数 欧拉定理 V+F-E=2 即 点数+面数-边数=2 (这里的面数包括了外部) #include < ...

  2. 使用idea从svn检出项目

    1.创建空的工程 2. 3. 编辑项目进行提交svn服务器进行自动整合

  3. The linux command 之软件包管理

    一.软件包系统 不同的Linux发行版用的是不同的软件包系统,多数都采用以下两种: 二.软件包系统工具 三.在库里查找软件包 四.安装库中的软件包 五.安装软件包文件中的软件包 六.删除软件包 七.更 ...

  4. Caused by: android.view.InflateException: Binary XML file line #18: Binary XML file line #18: Error inflating class android.widget.CheckedTextView

    困扰了我一天啊 终于吧 这个大bug  给解决掉了 可能是 当时懵逼了  竟然忘记重新构造了!!尴尬了 直接把项目的 build  文件删除重新构造了一边!!

  5. SQLSTATE[HY000]: General error: 1366 Incorrect string value

    在Laravel项目的 storages/logs/Laravel.log看到的错误信息片段: SQLSTATE[HY000]: General error: 1366 Incorrect strin ...

  6. python 之单例模式

    单例模式1 单例=>只有一个单例2 静态方法+静态字段3 所有实例中等转的内容相同时 用单例模式class Sqllite: __instance=None def __init__(self) ...

  7. Windows 虚拟机 VM

    VMware是全球台式电脑及资料中心虚拟化解决方案的领导厂商.VMWare Workstation是该公司出品的“虚拟 PC”软件(即:大家常说的“虚拟机”),通过它可在一台电脑上同时运行更多的Mic ...

  8. LUOGU P2564 [SCOI2009]生日礼物 (队列+模拟)

    传送门 解题思路 还是比较好想的,用一个队列,然后把所有点放在一起排个序,依次入队.每次检查队头元素的种类是否为当前入队元素种类,是的话就一直\(pop\),每次更新答案即可. 代码 #include ...

  9. 11 Python Libraries You Might Not Know

    11 Python Libraries You Might Not Know by Greg | January 20, 2015 There are tons of Python packages ...

  10. ie9 jscript7 内存不足 页面无响应

    花了我差不多一天时间 我是加载一个datagrid ,多表联查,查询几遍(不一定,又是1遍就死了)后 就卡死了...后台日志都是过的.... 后来我发现数据库某个表的数据很多有一模一样的两条,把一份删 ...