用vue写一个登录页面
时间: 2023-10-23 15:12:49 浏览: 32
好的,以下是一个简单的登录页面的 Vue 组件代码:
```html
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="login">
<div>
<label>用户名:</label>
<input type="text" v-model="username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// 在这里编写登录逻辑,比如向后端发送请求进行验证
console.log(`用户名: ${this.username}, 密码: ${this.password}`);
},
},
};
</script>
```
这个组件包含一个表单,其中有两个输入框用于输入用户名和密码,还有一个提交按钮用于触发表单提交事件。在 `data` 中定义了 `username` 和 `password` 两个状态,这里使用了 Vue 的双向数据绑定将输入框的值绑定到这两个状态上。在 `methods` 中定义了 `login` 方法,用于处理表单提交事件,这里只是简单地将输入框的值输出到控制台中,实际上需要在这里编写登录逻辑,例如向后端发送请求进行验证等。
相关推荐
![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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)