利用vue写一个登录页面
时间: 2023-10-31 18:58:26 浏览: 33
好的,以下是一个简单的利用Vue写的登录页面示例:
```html
<template>
<div>
<h1>登录</h1>
<form>
<div>
<label for="username">用户名</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 在这里进行登录验证、跳转等操作
}
}
}
</script>
```
在这个示例中,我们使用了Vue的模板语法来渲染登录页面,并使用了`v-model`指令来与表单元素进行双向绑定。当用户点击登录按钮时,我们通过`login`方法来处理登录验证、跳转等操作。需要注意的是,在`<button>`标签上我们使用了`@click.prevent`来阻止默认的表单提交行为,以便我们可以自行处理登录逻辑。