<!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. Southern African 2001 Stockbroker Grapevine /// Floyd oj1345

    题目大意: 输入n 接下来n行 每行输入m 接下来m对a,b 若干个人之间会传播谣言,但每个人传播给其他人的速度都不一样, 问最快的传播路线(即耗时最短的)中最耗时的一个传播环节. 如果其中有人不在这 ...

  2. 【POJ】1251 Jungle Roads

    题目链接:http://poj.org/problem?id=1251 题意:n个村庄字母标号,每个字母后跟m个字母,表示该字母到mi的距离.求构建所有村庄道路的最短距离. 题解:最小生成树裸题.注意 ...

  3. SQLAlchemy连接数据库创建表

    # 连接数据库,创建表 def create_all(): engine = create_engine( 'mysql+pymysql://root:123456@127.0.0.1:3306/sq ...

  4. Java语言支持的变量类型有

    Java语言支持的变量类型有: 类变量:独立于方法之外的变量,用 static 修饰. 实例变量:独立于方法之外的变量,不过没有 static 修饰. 局部变量:类的方法中的变量.

  5. javascript 的学习笔记（第一天）

    1.==与=== ==   先转换类型,再比较 ===  直接比较 2.parseInt  把字符串转成整数 parsefloat  把字符串转成小数 3. 变量的作用域:变量起作用的范围 局部变量: ...

  6. sql (8) AVG

    SQL avg 语法SELECT AVG(column_name) FROM table_name新建表:StudentS S_id Grade Name phone1 98 小明 1234562 9 ...

  7. nginx css,js合并插件，淘宝nginx合并js，css插件

    先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config  ngx_http_concat_ ...

  8. 命令学习_ping

    PING: ping是一个所有操作系统都支持的简单工具.我么可以利用ping来解析DNS 的A record和PTRrecord. A记录是将域名映射到IP地址,这个是ping的缺省功能, ping同 ...

  9. 软件-开发软件：Android Studio

    ylbtech-软件-开发软件:Android Studio Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT, ...

  10. 接着上回，导包正确之后，出现javabean.Friend cannot be cast to java.util.List，的错误。找了很久。以为是User user0作为参数，改成了String username还是错误，看了看listFriend.jsp没有错误，我想会不会是包多了，导致类型复杂。最后发现包少了一个：

    import org.apache.commons.dbutils.handlers.BeanListHandler;这个包,BeanListHandler让我发现List<Friend> ...