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>
  • 相关阅读:
    SmartJS 系列规划分享和背景介绍
    SmartJS 第一期(0.1)发布
    让文档和Demo生成更加简单和强大
    SmartDoc(YUIDoc) 注释编写
    smartjs
    smartjs
    smartjs 0.3 DataManager 发布&介绍
    smartjs 0.2 OOP讲解
    smartjs 0.2 OOP讲解
    smartjs 0.2发布
  • 原文地址:https://www.cnblogs.com/Jeely/p/11057344.html
Copyright © 2011-2022 走看看