使用vue3+ts帮我写一个登录页
时间: 2024-01-14 08:02:48 浏览: 30
当然,下面是一个使用Vue 3和TypeScript编写的简单登录页示例:
首先,在你的Vue项目中创建一个新的组件,比如Login.vue:
```vue
<template>
<div class="login">
<h2>Login</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" required>
<input type="password" v-model="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
username: '',
password: '',
error: ''
};
},
methods: {
login() {
// 进行登录操作
if (this.username === 'admin' && this.password === '123456') {
// 登录成功
this.error = '';
alert('Login successful!');
} else {
// 登录失败
this.error = 'Invalid username or password';
}
}
}
});
</script>
<style scoped>
.login {
max-width: 300px;
margin: 0 auto;
}
form {
display: flex;
flex-direction: column;
}
input {
margin-bottom: 10px;
}
.error {
color: red;
}
</style>
```
在上面的示例中,我们创建了一个Login组件,包含一个表单用于输入用户名和密码。当点击登录按钮时,会触发`login`方法进行登录验证。如果用户名和密码匹配,弹出登录成功的提示;否则,显示登录失败的错误信息。
记得在你的Vue路由中配置该组件,并将其作为登录页进行使用。
希望这个示例对你有帮助!如果你有任何其他问题,请随时提问。