<!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. 【csp】2017-9

    1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...

  2. HDFS HA

  3. mantis 添加新状态配置方法

    在mantis的状态栏中一般只有:新建.反馈.认可.已确认.已分派.已解决.已关闭,七个选项,如果想在其中加入新的状态怎么做? 我要加入的状态为:重新打开 1.添加状态信息 打开config_defa ...

  4. 【模板篇】k短路 SDOI2010 魔法猪学院

    题目传送门 吐槽时间 题目分析 代码 题目の传送门 都成了一道模板题了OvO ============================================================= ...

  5. leetcood学习笔记-82-删除排序链表中的重复元素二

    题目描述: 方法一: class Solution(object): def deleteDuplicates(self, head): """ :type head: ...

  6. leetcood学习笔记-45-跳跃游戏二

    题目描述: 第一次提交;超时 class Solution: def jump(self, nums: List[int]) -> int: l = [] for i in range(len( ...

  7. Leetcode - K Sum

    List<List<Integer>> kSum_Trim(int[] a, int target, int k) { List<List<Integer>& ...

  8. [JZOJ3400] 【GDOI2014模拟】旅行

    题目 题目大意 给你一个图,让你选择权值和最小的边,使得\(1\)和\(n\),\(2\)和\(n-1\),--,\(K\)和\(n-K+1\)联通. \(K\leq 4\) 思考历程 一看到这题就觉 ...

  9. JavaScript——基本语法

    单词掌握 BOM 浏览器对象模型 DOM 文档对象模型 document 文档 break 中断 continue 继续 1.js脚本位置 通常可以在三个地方编写js脚本代码,一是在网页文件的< ...

  10. 一个因为系统字号设置导致的rem计算渲染异常问题

    测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...