写一段vue的登录页面
时间: 2023-10-14 20:11:07 浏览: 26
下面是一段简单的 Vue 登录页面的代码示例:
```
<template>
<div>
<form>
<div>
<label>用户名:</label>
<input type="text" v-model="username"/>
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password"/>
</div>
<div>
<button @click="login">登录</button>
</div>
</form>
</div>
</template>
<script>
export default {
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
// 这里可以使用 axios 或者其他方式向后端发送请求,完成登录
console.log(this.username, this.password)
}
}
}
</script>
```
在这段代码中,我们使用了 `v-model` 指令来绑定输入框的值到 Vue 组件的 `data` 中。然后在登录按钮的点击事件 `@click` 中,我们调用了组件的 `login` 方法,并在该方法内部输出了用户名和密码的值,实际项目中,这里应该是向后端发送请求完成登录操作。