<!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>

    <h3>选择性别</h3>

    <input type="radio" id="male" value="男" v-model="pickedSex">

    <label for="male">男</label>

    <br>

    <input type="radio" id="female" value="女" v-model="pickedSex">

    <label for="female">女</label>

    <h3>选择爱好</h3>

    <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">

    <label for="game">玩游戏</label>

    <br>

    <input type="radio" id="movie" value="看电影" v-model="pickedHobby">

    <label for="movie">看电影</label>

    <h3>选择结果</h3>

    <p>性别: {{ pickedSex }}</p>

    <p>爱好: {{ pickedHobby }}</p>

</div>

<script>

    var myApp = new Vue({

        el: '#myApp',

        data: {

            pickedSex: "",

            pickedHobby: "",

        },

        methods: {

        },

    });

</script>

</body>

</html>

表单单选按钮input[type="radio"]的更多相关文章

  1. Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互

    <input>        无限制输入     type    限制输入 type = 如下类型     type 后还可以跟一些属性: 如<input type=text max ...

  2. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  3. 自定义input[type="radio"]的样式（支持普通浏览器，IE8以上）

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  4. 自定义input[type="radio"]

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  5. 常用6种type的form表单的input标签分析及示例

    <input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...

  6. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  7. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  8. 前端 HTML form表单标签 input标签 type属性 重置按钮 reset

    input type="reset" value="重置" reset重置 还原到默认状态 <!DOCTYPE html> <html lan ...

  9. <input type="radio">单选按钮

    转自:http://www.divcss5.com/html/h490.shtml1 <form> 男性: <input type="radio" checked ...

随机推荐

  1. 使用kubeadm安装kubernetes 1.15

    1.主机准备篇 使用vmware Workstation 10创建一台虚拟机,配置为2C/2G/50G,操作系统为CentOS Linux release 7.6.1810 (Core). IP地址为 ...

  2. 9.ActiveMQ理论

    一.首先说下什么是消息队列? 1.消息队列是在消息的传输过程中保存消息的容器. 二.为什么要用到消息队列? 主要原因是由于在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的inse ...

  3. springcloud(十六)：服务网关zuul （2）

    Zuul的核心 Filter是Zuul的核心,用来实现对外服务的控制.Filter的生命周期有4个,分别是“PRE”.“ROUTING”.“POST”.“ERROR”,整个生命周期可以用下图来表示. ...

  4. [转载]Spring AOP 深入剖析

    转载自 http://www.cnblogs.com/digdeep/p/4528353.html 多谢@digdeep AOP是Spring提供的关键特性之一.AOP即面向切面编程,是OOP编程的有 ...

  5. Linux 实用指令（10）-RPM和YUM

    目录 RPM 和 YUM 1 rpm 包的管理 1.1 介绍 1.2 rpm包的简单查询指令 1.3 rpm包名基本格式 1.4 rpm包的其他查询指令: 1.5 卸载rpm 包 1.6 安装rpm包 ...

  6. dev设置子窗体的初始位置，grid控件表头的属性设置

    当在父窗体上弹出子窗体时,一般设置子窗体的初始位置是居中, //在需要展示子窗体的父窗体上写这段,注意必须设置在show方法之前Form2 f2 = new Form2(); f2.MdiParent ...

  7. 从零开始：Mysql基于Amoeba的集群搭建

    从零开始:Mysql基于Amoeba的集群搭建 准备环境 1.mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz 2.amoeba-mysql-binary-2.0. ...

  8. if else 和 swith效率比较

    读大话设计模式,开头的毛病代码用if else实现了计算器,说计算机做了三次无用功,优化后是用switch,那么switch为什么比if else效率高呢, 百度找了几个说是底层算法不一样,找了一个比 ...

  9. CF431E Chemistry Experiment

    题意:有n个试管,有高度为hi的水银.操作1:将试管x中的水银高度改成y.操作2:将体积为v的水注入试管,求水位的高度?n,q<=1e5. 标程: #include<bits/stdc++ ...

  10. case in

    #!/bin/bash source /etc/profilesource ~/.bashrc #自己定义$version_number case $version_number in3.0.17) ...