在vue项目中写出一个用户登录页面
时间: 2024-01-24 16:01:48 浏览: 14
好的,下面是一个简单的用户登录页面的 Vue 代码示例:
```
<template>
<div>
<form @submit.prevent="login">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password">
<br>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
// 这里可以使用 axios 或者其他的网络请求库
// 请求成功后,可以跳转到首页或者其他页面
}
}
}
</script>
```
在这个示例中,我们使用了一个表单来获取用户输入的用户名和密码,然后通过 `v-model` 指令将输入的值绑定到组件的 `data` 中。当用户点击登录按钮时,会触发 `login` 方法,我们可以在这个方法中发送登录请求并根据请求结果决定是否跳转到其他页面。需要注意的是,为了防止表单默认的提交行为,我们使用了 `@submit.prevent` 修饰符来阻止表单的默认行为。