vue登录界面选择角色代码
时间: 2023-12-11 17:54:45 浏览: 26
以下是一个简单的 Vue 登录界面选择角色的示例代码:
```
<template>
<div>
<h1>请选择角色</h1>
<div v-for="role in roles" :key="role.id">
<input type="radio" :id="role.id" :value="role.id" v-model="selectedRole">
<label :for="role.id">{{ role.name }}</label>
</div>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
roles: [
{ id: 1, name: '管理员' },
{ id: 2, name: '普通用户' },
{ id: 3, name: '游客' }
],
selectedRole: null
}
},
methods: {
login() {
// 根据选中的角色进行登录操作
console.log('选中的角色是:', this.selectedRole)
// TODO: 登录操作
}
}
}
</script>
```
在上述代码中,我们使用了 v-for 指令来遍历角色列表,并使用 v-model 指令绑定了选中的角色。最后,在登录按钮的点击事件中,我们可以获取到选中的角色,并进行相应的登录操作。