我需要用vue2写的登录页面
时间: 2023-03-23 18:03:19 浏览: 51
好的,以下是使用Vue2编写的一个简单的登录页面示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="login">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required>
<br>
<button type="submit">登录</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login: function() {
// 在这里编写登录逻辑,比如向后端API发送登录请求等等
alert(`用户名:${this.username}\n密码:${this.password}`);
}
}
});
</script>
</body>
</html>
```
这个登录页面使用了Vue2来处理表单数据绑定和事件处理,当用户点击登录按钮时,会触发`login`方法,这里可以编写向后端API发送登录请求的逻辑。在这个例子中,我们只是简单地弹出一个提示框来显示用户输入的用户名和密码。