Vue.js课后练习（登录注册和大小比较）

news2025/1/17 1:07:51

第一题

请编写登录页面和注册页面，通过动态组件实现动态切换页面中显示的组件，效果如图1和图2所示。

图1 登录页面

图2 注册页面

代码：

my.vue代码:

<template>
	登录
</template>

<script setup>
</script>

<style>
</style>

you.vue代码：

<template>
	注册
</template>

<script setup>
</script>

<style>
</style>

father.vue代码：

<template>
	<button @click="suleng=my">登录</button>
	<button @click="suleng=you">注册</button>
	<div>
		<component :is="suleng"></component>
	</div>
</template>

<script setup>
	import my from './my.vue'
	import you from './you.vue'
	import {shallowRef} from 'vue'
	const suleng = shallowRef(my)
</script>

<style>
</style>

运行结果：

第二题

编程题1（请填写代码和运行结果截图）

请实现一个比较2个数大小的页面，当输入2个数字后，单击“比较”按钮后自动比较这2个数的大小，页面效果参考图1。比较数字大小结果显示的页面效果参考图2。

图1 比较2个数字大小的页面效果

图2 比较数字大小结果显示的页面效果

diyiti.vue代码：

<template>
	<table>
		<tr>
			<td>
				<p>请输入第一个数字:</p>
				<!-- 使用input事件自定义获取指令one，获取input里面的内容为number1 -->
				<input type="number" @input="one" class="yi" />
			</td>
		</tr>
		<tr>
			<td>
				<p class="i">请输入第二个数字:</p>
				<input type="number" @input="two" class="er" />
			</td>
		</tr>
		<tr>
			<td>
				<!-- 给按钮定义点击事件，自定义comparison方法 -->
				<button @click="comparison">比较</button>
			</td>
		</tr>
		<tr>
			<!--双大号语法 转换响应式数据result -->
			<p>{{result}}</p>
		</tr>
	</table>
</template>

<script setup>
	import {ref} from 'vue'
	// 定义值number1 number2  使用let定义则后面使用获取值num

	let number1 = ref();
	let number2 = ref();
	// 使用const定义，使用number时后面需要加
	const result = ref('')
	// 自定义方法one
	const one = (event) => {
		// 获取input里面的内容为number1
		number1 = Number(event.target.value)
	}

	const two = (event) => {
		number2 = Number(event.target.value)
	}
	// 按钮点击执comparison(比较)方法
	const comparison = () => {
		// 使用if判断不同条件下给响应式数据结果的赋值
		if (number1 == number2) {
			// 响应式result数据结果的赋值
			result.value = '比较结果：两数相等';
		} else if (number1 > number2) {
			result.value = '比较结果：第一数大于第二个数';
		} else {
			result.value = '比较结果：第一数小于第二个数';
		}
	}
</script>

<style>
	
	.yi{
		position:absolute;
		left: 150px;
		top: 30px;
	}
	.er{
		position: absolute;
		left: 150px;
		top: 55px;
		
	}
	.i{
		position: absolute;
		top: 45px;
	}
	button{
		position: absolute;
		top: 120px;
	}
</style>

运行结果：