• 为什么选性别会导致兴趣都选中-vue


    为什么选性别会导致兴趣都选中-vue

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%=basePath%>">
    
    <title>Vue index</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    
    <!-- Bootstrap core CSS -->
    <link href="js/b/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/jumbotron.css" rel="stylesheet">
    
    <script src="js/vue.js"></script>
    </head>
    
    <body>
    <div class='container' id="example">
    <form>
    姓名:
    <input type="text" v-model="data.name" placeholder="">
    <br />
    性别:
    <input type="radio" id="man" name="gender" value="One" v-model="data.sex"> 
    <label for="man" ></label>
    <input type="radio" id="male" name="gender" value="Two" v-model="data.sex" >
    <label for="male"></label>
    <br />
    兴趣:
    <input type="checkbox" id="book" value="book" v-model="data.intrerest" >
    <label for="book">阅读</label>
    <input type="checkbox" id="swim" value="swim" v-model="data.intrerest" >
    <label for="swim">swim</label>
    <input type="checkbox" id="game" value="game" v-model="data.intrerest" >
    <label for="game">game</label>
    <input type="checkbox" id="song" value="song" v-model="data.intrerest" >
    <label for="song">song</label>
    <br />
    身份:
    <select v-model="data.identity">
        <option value="teacher" selected>教师</option>
        <option value="doctor" >医生</option>
        <option value="lawyer" >律师</option>
    </select>
    </form>
    </div>
    
    <script type="text/javascript">
        new Vue({
            el:"#example",
            data:{
                data:{
                    name:"",
                    sex:"",
                    interest:[],
                    identity:""
                }
            }
        });
    </script>
    </body>
    </html>

    为什么呢?

  • 相关阅读:
    拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
    拖拽系列一、JavaScript实现简单的拖拽效果
    CSS3中三角形及三角形组合图实现
    计算机内存管理介绍
    [Leetcode]双项队列解决滑动窗口最大值难题
    [Leetcode]827.使用回溯+标记解决最大人工岛问题
    计算机启动过程
    [Leetcode]895.最大频率栈
    GDB查看内存(x 命令)
    理解递归
  • 原文地址:https://www.cnblogs.com/stono/p/6884021.html
Copyright © 2020-2023  润新知