VUE 登陆页面账号实现输入账号后,下拉框选择账号
时间: 2024-05-06 16:17:10 浏览: 15
你可以在 Vue 登录页面上添加一个下拉框,然后将下拉框的选项设置为已经注册的账号列表。当用户输入账号时,下拉框会自动筛选匹配的账号,并将其显示在下拉框列表中。
在 Vue 中,你可以使用 `v-model` 指令绑定输入框的值,然后通过 `v-for` 指令循环遍历账号列表,将每个账号作为下拉框的选项。
以下是一个简单的示例代码:
```
<template>
<div>
<label for="username">账号:</label>
<input id="username" type="text" v-model="username">
<select v-model="selectedAccount">
<option v-for="account in accounts" :value="account">{{ account }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
accounts: ['account1', 'account2', 'account3'],
selectedAccount: ''
}
}
}
</script>
```
在这个示例中,我们定义了一个 `username` 变量来绑定输入框的值,一个 `accounts` 数组来存储所有已注册的账号,以及一个 `selectedAccount` 变量来绑定下拉框选中的账号。然后,我们使用 `v-for` 指令循环遍历 `accounts` 数组,将每个账号作为下拉框的选项,并将选中的账号绑定到 `selectedAccount` 变量中。
当用户输入账号时,下拉框会自动筛选匹配的账号,并将其显示在下拉框列表中。用户可以选择已经存在的账号,也可以继续输入新的账号。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)