为什么选性别会导致兴趣都选中-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>

为什么呢?

时间: 2024-08-07 06:41:43

为什么选性别会导致兴趣都选中-vue的相关文章

Ext树控件第一次勾选父节点子节点没选中

项目中同事提出了这样一个bug,为了解决这个问题,牛逼闪闪的码农登场了,该码农专制各种公交抢上抢下抢座位,专制各种偷鸡摸狗,专制各种广场舞大妈扰民,专制各种不服,总之哪里有不平哪里就有撒哥的身影 扯淡结束,进入今天的正题 问题: 第一次勾选父节点子节点竟然没选中,逆天了啊 初步分析: 可能是之前代码的逻辑错误造成的,随进入调试阶段... 调试中发现该参数为空(原来写代码的也太没素质了), 没有内容然后想到没有内容导致下面的子节点不能便利出来,所以出来后没有选中,嘿嘿 然后加上该参数,接着查看然后

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

判断复选框中是否有被选中的代码实例

判断复选框中是否有被选中的代码实例:复选框中一般多项,有时候我们需要判断这些付选中是否有被选中的项,下面就通过一个实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <t

EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中

需求:EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中 效果: /**   * 给树增加onCheck事件,首先使用cascadeCheck:false属性禁止全选,   * 然后获取当前选中节点的所有子节点,在判断其拥有子节点时对其所有字节点   * 进行遍历操作.在easyui中树节点的是否选中不是由checked:true   * 属性来控制,而是由class tree-checkbox0   * 和tree-checkbox1进行控制.--by wk   */  

recycleview中使用checkbox导致的重复选中问题

参考博文:http://www.myexception.cn/mobile/1852852.html 在使用RecycleView做仿微信图片选择器,其中条目中使用了checkbox,在选中时由于holder的复用,导致checkbox会多选,解决方案如下: 需要两个list一个用来放tag标记,一个用来放置选中的图片路径. holder.checkBox.setTag(new Integer(position));//防止复用导致的checkbox多选的问题. //防止复选的辅助list ch

对多选框进行操作,输出选中的多选框的个数

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="textml; charset=utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * 步骤: 9 * 1.新建一个空数组 1

兴趣,爱好,选中值拼接

//兴趣爱好,循环取选中的值,拼接 var cks = ""; $(":checkbox:checked").each(function () { cks += $(this).val() + ","; }); cks = cks.substr(0, cks.length - 1); <div class="mb10"> 兴趣爱好: <input type="checkbox" id=&q

DataGridView中EnditCommit()调用之后,单元格的内容被全选了,每次输入都要鼠标点击定位到最后才能继续输入

因为某些需求,DataGridView在输入一次内容,就要调用ECommitEdit(DataGridViewDataErrorContexts.Commit)来将内容提交,但是这样做之后,控件就会当你输入的内容都完成了,所以将内容全选(内部的原理我还没时间去了解,所以不太清楚,希望知道的人可以告诉我) 解决方案: 为了让用户可以正常输入一串字符,在每次调用CommitEdit()方法之后,都获取控件当前单元格对应控件类型TextBox currentTextBox,调用currentTextB

Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:  index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-anima