Vue写一个登录组件并给出代码
时间: 2023-12-27 22:02:51 浏览: 62
好的,以下是一个用Vue.js写的简单登录组件的代码示例:
```
<template>
<div>
<h2>登录</h2>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
</div>
<button @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// 在这里实现登录逻辑,比如向后端API发送请求并处理响应
// 如果登录成功,则可以在这里触发一些动作,比如导航到另一个页面
},
},
};
</script>
```
上面的代码定义了一个登录组件,包含了一个表单,用户可以输入用户名和密码并点击“登录”按钮。当用户点击“登录”按钮时,`login`方法将被调用,我们可以在这个方法里实现登录逻辑,比如向后端API发送请求并处理响应。如果登录成功,可以在这个方法里触发一些动作,比如导航到另一个页面。
阅读全文