用VUE 写一个用户登录界面
时间: 2023-12-29 12:50:09 浏览: 22
这是一个基础的用户登录页面,包含用户名和密码输入框以及登录按钮,使用Vue进行双向数据绑定和事件监听。
```html
<template>
<div>
<h2>用户登录</h2>
<form>
<label for="username">用户名:</label>
<input type="text" v-model="username" id="username" name="username" required>
<br>
<label for="password">密码:</label>
<input type="password" v-model="password" id="password" name="password" required>
<br>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: 实现登录逻辑
console.log(`用户名: ${this.username}, 密码: ${this.password}`)
}
}
}
</script>
```
使用`v-model`指令将输入框与Vue实例中的数据绑定,`@click`事件监听登录按钮的点击操作,`prevent`修饰符阻止默认的表单提交行为。在`login`方法中实现具体的登录逻辑,这里只是简单的打印出用户名和密码。