<!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. 【转载】C# 开源库大全非常好

    原文地址:http://m.blog.csdn.net/woddle/article/details/37311877 C#开源大全 商业协作和项目管理平台-TeamLab 网络视频会议软件-VMuk ...

  2. Hive应用实例：WordCount

  3. Jquery操作的是内存数据，H5 dataset操作的是dom属性

    Jquery操作的是内存数据,H5操作的是dom属性

  4. 数据库的元数据抽取SQL

    一.数据库驱动类.端口.默认用户名密码 数据库 驱动 端口 用户名 密码 MySQL com.mysql.jdbc.Driver 3306 root root DB2 com.ibm.db2.jcc. ...

  5. 如何检测 Web 服务请求丢失问题

    导读 『StabilityGuide』是阿里多位阿里技术工程师共同发起的稳定性领域的知识库开源项目,涵盖性能压测.故障演练.JVM.应用容器.服务框架.流量调度.监控.诊断等多个技术领域,以更结构化的 ...

  6. 基于VUE利用pdf.js实现文件流形式的pdf显示

    首先推荐大家看一下这个demo vue-pdf.js-demo,这里面包含固定本地地址,远程pdf地址,通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf.(所谓文件流,就是 ...

  7. VIM 代码自动补全， YouCompleteMe安装及配置

    效果 下载 使用Vundle安装 YCM 1. 安装Vundle window用户安装vundle参考这里:Windows下 vundle的安装和使用 2.

  8. c# Data = select new{} 返回值的显示

  9. 使用 JDK11 遇到的问题

    1.下载的 JDK 解压版中没有 jre 目录以及相应的包,需要通过命令自动生成 进入 JDK 的 bin 目录下,执行以下命令,然后会在 bin 目录下生成一个 jre 目录,需要将该 jre 目录 ...

  10. 2019-9-2-win10-uwp-弹起键盘不隐藏界面元素

    title author date CreateTime categories win10 uwp 弹起键盘不隐藏界面元素 lindexi 2019-09-02 12:57:38 +0800 2018 ...