vue中记住密码存的账号,怎么实现一边输入一边从存的号码里筛选 代码实现
时间: 2024-03-06 08:51:44 浏览: 56
可以computed计算属性结合v-model指令来实现一边输入一边筛选的功能。具体代码实现如下:
HTML部分:
```html
<template>
<div>
<label>账号:</label>
<input type="text" v-model="inputValue" @input="filterAccounts">
<br>
<label>密码:</label>
<input type="password" v-model="password">
<br>
<label>记住密码:</label>
<input type="checkbox" v-model="remember">
<br>
<label>可选账号:</label>
<select v-model="selectedAccount">
<option v-for="account in filteredAccounts" :value="account">{{ account }}</option>
</select>
</div>
</template>
```
JavaScript部分:
```javascript
export default {
data() {
return {
inputValue: '',
password: '',
remember: false,
accounts: ['account1', 'account2', 'account3', 'account4'],
selectedAccount: ''
}
},
computed: {
filteredAccounts() {
return this.accounts.filter(account => account.includes(this.inputValue))
}
},
methods: {
filterAccounts() {
this.selectedAccount = ''
}
}
}
```
在上面的代码中,我们使用了computed计算属性来筛选符合输入内容的账号,然后使用v-model指令将输入内容绑定到inputValue上,并监听input事件,当输入改变时,调用filterAccounts方法清空selectedAccount,以免出现无法匹配的情况。最后将filteredAccounts渲染到select标签中,实现一边输入一边筛选的效果。
阅读全文