首页vue写一个前端登陆界面

vue写一个前端登陆界面

时间: 2024-09-15 07:11:01 浏览: 42

在Vue.js中创建一个简单的登录界面，你可以按照以下步骤操作： 1. **设置基本结构**： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Vue 登录页面</title> <script src="https://cdn.jsdelivr.net/npm/vue@3"></script> </head> <body> <div id="app"> <h2>登录</h2> <form @submit.prevent="handleSubmit"> <label for="username">用户名:</label> <input type="text" v-model="username" required> <br> <label for="password">密码:</label> <input type="password" v-model="password" required> <br> <button type="submit">登录</button> </form> <p v-if="errorMessage">{{ errorMessage }}</p> </div> <script> new Vue({ el: '#app', data: { username: '', password: '', errorMessage: '' }, methods: { handleSubmit(event) { if (this.username && this.password) { // 在这里检查用户输入并处理登录逻辑（例如：API请求） // 如果验证通过，清除错误消息 this.errorMessage = ''; } else { // 输入为空，显示错误信息 this.errorMessage = '请输入用户名和密码'; } } } }); </script> </body> </html> ``` 这个例子中，我们使用了Vue的数据绑定(`v-model`)来实时更新表单字段，`@submit.prevent`阻止表单默认提交事件并在提交时触发`handleSubmit`方法。如果用户名和密码都填写了，可以添加实际的认证逻辑；如果没有填写，会显示错误提示。

阅读全文