需求描述

    通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.点击注册切换到注册页面,注册字样加粗显示,页面显示手机号和验证码以及注册按钮.对应页面显示如下:


实现代码:

<template>
	<view class="content">
		<view class="index">
			<view class="titleClass">
				<view class="loginClass" @click="showLoginFunction" :style="{fontWeight:loginFontWeight}">登录</view>
				<view class="registerClass" @click="showRegisterFunction" :style="{fontWeight:registerFontWeight}">注册</view>
			</view>
			<view class="login" v-if="showLogin">
				<view class="login_mobile">
					<input class="login_mobile_input" type="number" placeholder="请输入手机号" />
				</view>
				<view class="login_password">
					<input class="login_password_input" type="number" placeholder="请输入密码" />
				</view>
				<button class="login_button" type="default">登录</button>
			</view>
			<view class="register" v-if="!showLogin" >
				<view class="register_mobile">
					<input class="register_mobile_input" type="number" placeholder="请输入手机号" />
				</view>
				<view class="register_code">
					<input class="register_code_input" type="number" placeholder="请输入校验码" />
				</view>
				<button class="register_button" type="default">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 控制登录或是注册是否显示
				showLogin:true,
				// 登录或注册按钮是否加粗
				loginFontWeight: 'bold',
				registerFontWeight: ''
			}
		},
		onLoad() {
		},
		methods: {
			// 显示登陆信息
			showLoginFunction(){
				this.showLogin=true,
				this.loginFontWeight='bold'  // 设置登录字体加粗
				this.registerFontWeight=''
			},
			// 显示注册页
			showRegisterFunction(){
				this.showLogin=false
				this.loginFontWeight=''  // 设置登录字体加粗
				this.registerFontWeight='bold'
			}
		}
	}
</script>

<style>
	.titleClass{
		display: flex;  
		justify-content: space-between;  // 均匀排列登录和注册
	}
	.login_mobile,.login_password,.register_mobile,.register_code{
		display: flex;    // 水平放置
		margin-top: 10px;   // 距离上面10px
	}
	.login_button,.register_button{
		margin-top: 10px;   // 距离上面10px
		justify-content: center;  // 登录或注册字样水平居中
	}
	.login_mobile_input,.login_password_input,.register_mobile_input,.register_code_input{
		width: 220px;
		height: 40px;
		border: 2px #C8C7CC solid;   // 设置边框
		border-radius:15px;         // 设置圆角
		padding: 5px 2px 5px 10px;  // 文本框输入内容边距:上右下左
	}
	.content {
		margin-top: 200px;  // 主页面距离上面的距离
		display: flex;
		justify-content: center;  // 内容水平居中
	}
</style>

总结一下实现过程中需要处理的样式:
    1.点击登录或是注册进行切换显示不同的文本框.
    使用v-if进行控制不同的view进行显示.
    2.登录以及注册按钮显示在一行中并分别进行左右对齐
    实现效果借助justify-content: space-between;来实现,其余效果可以参考:
https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between
    3.点击登录或是注册将对应的字体变更为加粗
    data中设置样式加粗字段,动态设置style属性.fontWeight:bold用于设置字体加粗.
    4.注册或是登录页面中每个文本输入框中间间隔一定距离显示,文本框中输入的内容设置一定的边距.
    使用margin-top设置每个view之间的距离,文本框中使用padding设置文本输入内容与文本框的间距.文本框圆角设置通过border-radius:15px;进行设置.