写一个uniapp input搜索框
时间: 2023-07-20 16:44:08 浏览: 95
input框只能输入数字和一个小数点
3星 · 编辑精心推荐
好的,以下是一个简单的 uni-app 输入框搜索框示例:
```html
<template>
<view>
<input type="text" v-model="keyword" @input="search" placeholder="请输入搜索关键词" />
<view v-if="searchResult.length > 0">
<view v-for="(item, index) in searchResult" :key="index">{{ item }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyword: '',
searchResult: []
}
},
methods: {
search() {
// 这里可以调用接口或者其他方法进行搜索
// 模拟数据
const result = ['搜索结果1', '搜索结果2', '搜索结果3']
this.searchResult = result.filter(item => item.includes(this.keyword))
}
}
}
</script>
```
这个示例中,我们使用了 `input` 标签和 `v-model` 双向绑定 `keyword` 变量,通过 `@input` 监听输入框的输入事件,当用户输入时触发 `search` 方法进行搜索,最后将搜索结果渲染出来。
阅读全文