使用vue2写一个登录界面,要有登录,注册,修改密码三个按钮
时间: 2024-05-14 18:14:48 浏览: 17
以下是使用Vue2写的一个简单的登录界面,包括登录、注册和修改密码三个按钮:
```
<template>
<div>
<h1>登录</h1>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" name="username" v-model="username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" v-model="password" />
</div>
<div>
<button type="button" @click="login">登录</button>
<button type="button" @click="register">注册</button>
<button type="button" @click="changePassword">修改密码</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// 在这里实现登录逻辑
console.log('登录');
},
register() {
// 在这里实现注册逻辑
console.log('注册');
},
changePassword() {
// 在这里实现修改密码逻辑
console.log('修改密码');
},
},
};
</script>
```
在上面的代码中,我们使用了Vue2的模板语法来构建界面,使用了`v-model`指令来绑定输入框的值,使用了`@click`指令来绑定按钮的点击事件。在`methods`中定义了三个方法,分别对应登录、注册和修改密码操作。这些方法实现的具体逻辑需要根据实际情况进行编写。