Copyright Statement: This article is the original article of the blogger, follow CC 4.0 BY-SA Copyright Agreement, reproduced please attach the link of origin and this statement
Links to this article:
https://blog.csdn.net/qq_35197283/article/details/101209744

This paper introduces the function of filtering (searching) the rendered list list list through the input box.
As shown in the figure:

Code segment

<template>
...
	<input v-model="filterText" type="text" placeholder="Equipment number,Device name" ></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">Task sheet number:</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">Status:</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>

The main part of the above code is the array rendered by the input box v-model bi-directional binding (filter Text) and v-for (initial data list and filtered data filter List)
list is obtained through the background interface, so it is not shown.
Then it will be rendered by filterList after calculating attributes.
The rendered effect is as follows: