zoukankan      html  css  js  c++  java
  • 表单单选按钮input[type="radio"]

    <!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>
  • 相关阅读:
    求js数组中最小值
    分析apply,call方法
    前端模块化详解
    js中形参的小练习
    js中return返回值小练习
    mysql 视图
    mysql 数据库语句
    mysql 事务管理
    vue-前端工程化
    Vue-router
  • 原文地址:https://www.cnblogs.com/Jeely/p/11057344.html
Copyright © 2011-2022 走看看