<!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. PyQt5 安装及简单实例 -- 标签设置

    - 1 -    PyQt5安装,鉴于pip工具,安装其实很简单, 如下:(最好将pip索引配置成国内镜像,速度比默认的快得多) pip3 isntall PyQt5 - 2 -    利用Pycha ...

  2. mac下xampp+vscode进行php程序调试

    最近折腾公司的官网,是 php 做的,搭建调试环境做个记录,我用的是 mac 机. 1.下载最新的xampp,我的版本是XAMPP for OS X 5.6.31: 2.找到 php.ini,/App ...

  3. mysql 远程连接报错

    ./mysql -uzhu -p -h192.168.1.200 ERROR 2003 (HY000): Can't connect to MySQL server on '192.168.1.200 ...

  4. 【笔记篇】单调队列优化dp学习笔记&&luogu2569_bzoj1855股票交♂易

    DP颂 DP之神 圣洁美丽 算法光芒照大地 我们怀着 崇高敬意 跪倒在DP神殿里 你的复杂 能让蒟蒻 试图入门却放弃 在你光辉 照耀下面 AC真心不容易 dp大概是最经久不衰 亘古不化的算法了吧. 而 ...

  5. SUBTRACT

    SUBTRACT 给出一个长度为n序列\(\{a_i\}\),定义一个操作,记做\(con(a,i)\),意思是用\(a_i-a_{i+1}\)替代\(a_i,a_{i+1}\),显然最后一个数字不能 ...

  6. mysql 主从笔记

    主库配置 一.修改主库配置文件 开启binlog,并设置server-id,每次修改配置文件后都要重启mysql服务才会生效 server-id = log-bin = mysql-bin binlo ...

  7. Windows 设置IP解决方案

    { super + e / windows + e Mouse Right play down network link }

  8. thinkphp 操作绑定到类

    定义 ThinkPHP3.2版本提供了把每个操作方法定位到一个类的功能,可以让你的开发工作更细化,可以设置参数ACTION_BIND_CLASS,例如: 'ACTION_BIND_CLASS' =&g ...

  9. hdu多校第二场1011 （hdu6601） Keen On Everything But Triangle 主席树

    题意: 给定一个数列,每次询问一个区间,问这个区间中的值可组成的周长最大的三角形的周长. 题解: 定理1:给定一些值,这些值中组成边长最大的三角形的三条边的大小排名一定是连续的. 证明:假如第k大,第 ...

  10. CSS 属性2

    CSS背景属性   background-color:背景颜色.   background-image:背景图片地址.如:background-image:url(images/bg.gif)   b ...