用vue写一个登录页面
时间: 2023-08-04 20:34:09 浏览: 47
好的,下面是一个简单的用Vue.js写的登录页面示例:
首先,您需要在Vue.js应用程序中引入Vue.js库,并创建一个Vue实例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
<br>
<button type="submit" v-on:click.prevent="login()">Login</button>
</form>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login: function() {
// 这里可以添加登录逻辑
console.log('Username: ' + this.username);
console.log('Password: ' + this.password);
}
}
})
</script>
</body>
</html>
```
在这个示例中,我们创建了一个Vue实例,将其挂载在id为“app”的div上。我们还定义了两个数据属性:username和password,这些将与输入框的值进行绑定。我们还定义了一个login方法,在这个方法中,您可以添加您的登录逻辑。
在模板中,我们创建了一个包含用户名和密码输入框的表单,并且在提交按钮上添加了一个v-on:click.prevent指令,这样在点击按钮时将不会执行表单的默认提交操作。这样,我们就可以通过v-model指令将输入框的值绑定到Vue实例的数据属性上。
在login方法中,我们只是简单地将输入框的值打印到控制台上,但您可以根据您的需求来添加具体的登录逻辑。
希望这个示例对您有所帮助!