VUE 登陆页面账号实现输入账号后,下拉框选择账号
时间: 2024-05-16 21:18:31 浏览: 9
可以使用 `v-model` 绑定输入框中的账号,然后在下拉框中使用 `v-for` 渲染账号选项。当选中某个选项时,可以通过 `@change` 事件将选中的账号赋值给绑定的数据。以下是一个简单的示例代码:
```html
<template>
<div>
<input type="text" v-model="account" />
<select @change="onSelectAccount">
<option v-for="option in accountOptions" :value="option.value">{{ option.label }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
account: '',
accountOptions: [
{ label: '账号1', value: 'account1' },
{ label: '账号2', value: 'account2' },
{ label: '账号3', value: 'account3' },
],
};
},
methods: {
onSelectAccount(event) {
this.account = event.target.value;
},
},
};
</script>
```
在这个示例中,`account` 变量绑定了输入框的值,`accountOptions` 数组存储了可选的账号选项。当选中某个选项时,`onSelectAccount` 方法将选中的值更新到 `account` 变量中。你可以根据实际需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)