vue登陆页面代码
Vue 是一个用于构建用户界面的开源 JavaScript 框架。下面是一份基于 Vue 的登录页面代码示例:
```vue
登录页面
export default {
data() {
return {
username: ''
password: ''
errorMessage: ''
}
}
methods: {
login() {
// Simulate login request
if (this.username === 'admin' && this.password === '123456') {
// Login success
this.errorMessage = '';
alert('登录成功');
} else {
// Login failed
this.errorMessage = '用户名或密码错误';
}
}
}
}
.login {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 80px;
}
input[type="text"]
input[type="password"] {
width: *;
padding: 5px;
}
button {
display: block;
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error-message {
margin-top: 10px;
color: red;
}
```
这段代码实现了一个简单的登录页面。页面包含一个用户名输入框、一个密码输入框和一个登录按钮。当用户点击登录按钮时,会触发登录方法,根据用户名和密码的验证结果显示登录成功或失败的提示信息。
用到的 Vue 基本概念包括数据绑定、表单处理、条件渲染和样式绑定。在代码中,`v-model` 指令用于实现数据双向绑定;`@submit.prevent` 指令用于阻止表单默认提交行为;`v-if` 指令用于条件渲染错误提示信息;`{{ }}` 语法用于展示错误提示信息。
这是一个简单的示例,实际项目中可能会有更复杂的逻辑和需求。Vue 提供了丰富的功能和工具,可以帮助开发者构建更丰富的用户界面和更复杂的应用程序。希望这个示例能帮助你入门 Vue 开发。