用vue+vant做一个漂亮的登录页面代码实例
时间: 2023-09-20 19:13:13 浏览: 73
当然可以!以下是一个使用Vue.js和Vant组件库构建的漂亮登录页面的代码示例:
```vue
<template>
<div class="login">
<van-image
src="/assets/logo.png"
fit="contain"
class="logo"
/>
<van-field
v-model="username"
label="用户名"
placeholder="请输入用户名"
/>
<van-field
v-model="password"
label="密码"
placeholder="请输入密码"
type="password"
/>
<van-button
type="primary"
block
@click="login"
>
登录
</van-button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 处理登录逻辑
// ...
}
}
};
</script>
<style scoped>
.login {
padding: 20px;
}
.logo {
width: 100px;
margin: 0 auto;
margin-bottom: 20px;
}
</style>
```
在这个示例中,我们使用了Vant组件库的`van-image`、`van-field`和`van-button`组件来创建登录页面。`van-image`用于显示logo图片,`van-field`用于输入用户名和密码,`van-button`用于提交登录操作。
你可以根据自己的需求修改样式和处理登录逻辑。希望能对你有所帮助!