vue实现单选按钮的动态渲染

最新推荐文章于 2024-05-21 22:58:25 发布

星星遇坠

最新推荐文章于 2024-05-21 22:58:25 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/qq_44302282/article/details/106743452

版权

vue实现单选按钮radio选择时显示不同内容

看下图
在这里插入图片描述
代码如下：

<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Insert title here</title>
</head>
<body style="background-color:pink;">
		
		<div align="center">
			<span class="title">成绩查询系统</span>
		</div>
		<br><br>
		<hr color="black"><br>
		
		<div id="app" >
			<p class="div2" >请选择登录模式：</p>
			<p class="div1">
			<template v-for="branch in branches">
				<input
				type="radio"
				:id="branch"
				:value="branch"
				name="branch"
				v-model="currentBranch"
				/>
			<label :for="branch">{{ branch }}</label>
			</template>
			</p>
			
			<form action="" method="post" name="form" >
			<p v-if="currentBranch === '管理员登录'">
				 <input placeholder="请输入管理员账号" class="div3" name="userId" />  <br> 
				 <input placeholder="请输入管理员密码" class="div3" name="pwd" type="password" />  <br>
				 <span style="margin-left: 35%;padding:25px;">
				 <button class="div4" onclick="manager()" >登录</button>
				 <button class="div4">忘记密码</button>
				 </span>
			</p> 
			<p v-else="currentBranch === '学生登录'">
			     <input placeholder="请输入学号" class="div3" name="stuNo" />   
				 <button class="div4" onclick="student()" >登录</button>
			</p>
			</form>
			  
		</div>

		<script src="${pageContext.request.contextPath }/vue.js"></script>
		<script type="text/javascript" >
			var app=new Vue({
				el:'#app',
				data: {
				    branches: ["管理员登录", "学生登录"],
				    currentBranch: "管理员登录",
				},
			});
			function manager(){
				form.action="CheckManager";
			}
			function student(){
				form.action="GradeProcess";
			}
		</script>
		<style>
			.title
			{
				color:black;
				font-size:50px;
				font-family:'华文行楷'
			}
			.div2
			{
				font-family:'楷体';font-size:30px;padding-left:35%;
			}
			.div1
			{
				font-size: 20px;
				font-family: '楷体';
				margin-left:0px;
				padding-left:35%;
			}
			.div3
			{
				border-radius: 25px;
				border:2px solid 	#DB7093;
				margin-left: 35%;
				margin-top: 10px;
				padding:10px 40px;
			}
			
			.div4
			{
				border-radius: 10px;
				border:2px solid #DB7093;
				margin-top:10px;
				margin-left: 0px;
				width: 80px;
				height: 40px;
				cursor: pointer;
				background-color: white;
				
			}
		</style>
</html>

星星遇坠

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue实现单选按钮的动态渲染

vue实现单选按钮radio选择时显示不同内容看下图代码如下：<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
复制链接

扫一扫