<!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. 2019-2020 Saint-Petersburg Open High School Programming Contest (SpbKOSHP 19)

    2019-2020 Saint-Petersburg Open High School Programming Contest (SpbKOSHP 19) easy: ABFGHI medium-ea ...

  2. USACO 2004 Open The Cow Lineup /// oj25965

    题目大意: 输入n k,n头牛 k个品种 接下来n行描述每头牛的品种 输出无法找出的最短子序列的长度 Sample Input 14 515325134425123 Sample Output 3 H ...

  3. Pathfinding 模板题 /// BFS oj21413

    题目大意: Description Bessie is stranded on a deserted arctic island and wants to determine all the path ...

  4. JS函数 函数调用 函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

    函数调用 函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名. 第一种情况:在<script>标签内调用. <script type="text/java ...

  5. centos7 RPM命令安装操作

    RPM 安装操作 命令: rpm -i 需要安装的包文件名 举例如下: rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 exam ...

  6. cocos2D-X 常用功能封装

    Packaging_Kernel.h #pragma once #include <string> #include <map> #include <vector> ...

  7. 云HBase备份恢复，为云HBase数据安全保驾护航

    摘要: 介绍了阿里云HBase自研备份恢复功能的基本背景以及基本原理架构和基本使用方法.   云HBase发布备份恢复功能,为用户数据保驾护航.对大多数公司来说数据的安全性以及可靠性是非常重要的,如何 ...

  8. hdu6607 min25筛+杜教筛+伯努利数求k次方前缀和

    推导过程类似https://www.cnblogs.com/acjiumeng/p/9742073.html 前面部分min25筛,后面部分杜教筛,预处理min25筛需要伯努利数 //#pragma ...

  9. Java 基础数据类型

    Java 提供的基础数据类型(也称内置数据类型)包含:整数类型.浮点类型.字符类型.布尔类型. 整数类型 整数类型变量用来表示整数的数据类型.整数类型又分为字节型(byte).短整型(short).整 ...

  10. Delphi代码创建形式规范 1.0

                Delphi代码创建形式规范 1.0 本规范的目的:给自己的代码一个统一而标准的外观,增强 可读性,可理解性,可维护性 本规范的原则:名称反映含义,形式反映结构 1.单元风格 ...