uniapp vue2 搜索下拉框
时间: 2023-12-03 15:38:39 浏览: 42
以下是uniapp vue2实现搜索下拉框的方法:
1.在template中添加一个输入框和一个下拉框,使用v-model绑定输入框的值和下拉框的显示状态:
```html
<template>
<div>
<input type="text" v-model="searchText" @input="handleInput">
<ul v-show="showList">
<li v-for="(item, index) in dataList" :key="index" @click="handleSelect(item)">
{{ item }}
</li>
</ul>
</div>
</template>
```
2.在script中定义data和methods:
```javascript
<script>
export default {
data() {
return {
dataList: ['apple', 'banana', 'orange', 'pear'], // 下拉框数据
showList: false, // 是否显示下拉框
searchText: '' // 输入框的值
}
},
methods: {
handleInput() {
// 输入框输入时触发
this.showList = true // 显示下拉框
},
handleSelect(item) {
// 选择下拉框中的项时触发
this.searchText = item // 将选中的项赋值给输入框
this.showList = false // 隐藏下拉框
}
}
}
</script>
```
3.在style中定义下拉框的样式:
```css
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
}
li {
padding: 5px;
cursor: pointer;
}
li:hover {
background-color: #f2f2f2;
}
</style>
```