input输入框简单的实时搜索（过滤）功能 （uni-app）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：
https://blog.csdn.net/qq_35197283/article/details/101209744

介绍通过输入框对已经渲染好的list列表进行过滤（搜索）的功能
如图所示：

代码段

<template>
...
	<input v-model="filterText" type="text" placeholder="设备编号,设备名称" ></input>
	<view class="cu-card case">
		<navigator
			@click="linkProject(item.taskId,item.taskStatus)"
			class="cu-item shadow" 
			v-for="(item, index) in filterList" 
			:key="index">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="text-black">任务单号：</text>
						<view class="right"><text class="text-grey">{{item.taskNumber}}</text></view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-black">状态：</text>
						<view class="right"><text class="text-red">{{item.taskStatus | filter }}</text></view>
					</view>
				</view>
			</view>
		</navigator>
	</view>
...
</template>
<script>
...
	data() {
		return {
			filterText: '',
			list: []
		}
	},
	computed:{
		filterList () {
			var arr = []
			this.list.forEach((item) => arr.push(item))
			if (this.filterText) {
				arr = this.list.filter(item => item.taskNumber.includes(this.filterText))
			}
			return arr
		}
	},
	...
</script>

以上代码，主要部分在输入框v-model 双向绑定（filterText）和v-for所渲染的数组（最初数据list和过滤后数据filterList）
list是通过后台接口拿到的，所以不展示了。
再将通过计算属性处理后的filterList进行渲染。
渲染后的效果如图：