<!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. USACO2007 Protecting the Flowers /// 比值 前缀和 oj21161

    题目大意: 有N (2 ≤ N ≤ 100,000) 头牛偷吃花 将牛赶回牛棚需Ti minutes (1 ≤ Ti ≤ 2,000,000) 每头牛每分钟能吃Di (1 ≤ Di ≤ 100) 朵花 ...

  2. 如何在Ubuntu 16.04上安装Nginx

    原文链接https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-16-04 介绍 Nginx是世 ...

  3. java 在数组{1,2,3,4,6,7,8,9,10}中插入一个数5，使其插入完成后仍然有序

    1.需要实现的效果 2.代码实现 import java.util.Scanner; /* * 11.在数组{1,2,3,4,6,7,9,8,10}中插入一个数5, * 使其插入完成后仍然有序,运行结 ...

  4. Tomcat相关知识总结

    有关Tomcat的杂货店 一.修改端口号,并以IP访问 1.确保80端口没有程序占用.例如nginx等. 2.vi /tomcat/conf/server.xml 3.找到<Connector ...

  5. Android欢迎页短暂白屏

    在style中application theme下添加以下代码: <item name="android:windowIsTranslucent" >true</ ...

  6. php 图片旋转和png透明

    因需要先处理生成的二维码图片旋转,再和另外一张png图片合并,图片都是png <?php // this file writes the image into the http response ...

  7. wordpress 获取所有管理员的邮箱

    function get_administrator_email(){ $blogUsers = get_users('role=Administrator'); $adminEmails = arr ...

  8. thinkphp 插件控制器

    3.2.2版本开始支持插件控制器的调用,可以通过更加方便的URL地址访问到模块中的插件定义的控制器. 当URL中传入插件控制器变量的时候,会自动定位到插件控制器中的操作方法. 大理石平台精度等级 插件 ...

  9. csps模拟92数列，数对，最小距离题解

    题面:https://www.cnblogs.com/Juve/articles/11767225.html 数列: 简化题意:已知a,b,c,求满足$a*x+b*y=c$的$x+y$最小值 然后ex ...

  10. 二分图建图，并查集求联通——二维等价性传递 cf1012B好题！

    /* 模拟二分图:每个点作为一条边,连接的是一列和一行(抽象成一个点,列在左,行在右) 由题意得 a-b相连,a-c相连,b-d相连,那么d-c就不用再相连了 等价于把二分图变成联通的需要再加多少边 ...