请你使用Vue3语言编写一个登录页面,账号名验证为123,密码为123
时间: 2024-04-16 22:29:30 浏览: 32
好的,我将使用Vue3语言编写一个简单的登录页面,账号名验证为"123",密码为"123"。以下是代码示例:
```vue
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" />
</div>
<button type="submit">Submit</button>
</form>
<p v-if="errorMessage">{{ errorMessage }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const username = ref('');
const password = ref('');
const errorMessage = ref('');
const login = () => {
if (username.value === '123' && password.value === '123') {
// 登录成功
errorMessage.value = '';
alert('登录成功!');
} else {
// 登录失败
errorMessage.value = 'Invalid username or password';
}
};
return {
username,
password,
errorMessage,
login,
};
},
};
</script>
<style scoped>
h2 {
margin-bottom: 1rem;
}
div {
margin-bottom: 1rem;
}
input {
margin-bottom: 0.5rem;
}
button {
padding: 0.5rem 1rem;
}
</style>
```
这是一个简单的登录页面,当账号名和密码都为"123"时,点击提交按钮会弹出登录成功的提示框。如果账号名或密码不匹配,会显示错误信息"Invalid username or password"。请注意,这只是一个示例,实际项目中应该使用更安全的验证方式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)