vue实习不同登录方式的前端页面
时间: 2023-11-15 12:04:51 浏览: 26
以下是基于Vue的不同登录方式的前端页面示例:
1. 账号密码登录:
```
<template>
<div>
<form>
<div>
<label>账号</label>
<input type="text" v-model="username">
</div>
<div>
<label>密码</label>
<input type="password" v-model="password">
</div>
<button @click.prevent="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submit() {
// 处理登录逻辑
}
}
}
</script>
```
2. 手机号码登录:
```
<template>
<div>
<form>
<div>
<label>手机号码</label>
<input type="text" v-model="phone">
</div>
<div>
<label>验证码</label>
<input type="text" v-model="code">
<button @click.prevent="getCode">获取验证码</button>
</div>
<button @click.prevent="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
phone: '',
code: ''
}
},
methods: {
getCode() {
// 发送短信验证码
},
submit() {
// 处理登录逻辑
}
}
}
</script>
```
3. 社交媒体登录:
```
<template>
<div>
<button @click.prevent="weiboLogin">微博登录</button>
<button @click.prevent="wechatLogin">微信登录</button>
<button @click.prevent="qqLogin">QQ登录</button>
</div>
</template>
<script>
export default {
methods: {
weiboLogin() {
// 调用微博登录API
},
wechatLogin() {
// 调用微信登录API
},
qqLogin() {
// 调用QQ登录API
}
}
}
</script>
```