uniapp做微信小程序搜索查询数据

Vue uniapp语法
在后端还没写好查询接口的时候 为了实现前端的搜索效果 可以前端实现数组的遍历查询
或者面试的时候要求前端写一个demo =====>针对前端小白的教程 干净利索
原图：

根据名称查询数据：

根据设备号查询：

HTML部分 先把数据进行渲染布局 最终效果为图一

<view class="print-box">
		<!-- 顶部搜索框 -->
		<view class="print-input flex" style="">
			<view class="" style="flex: 1;">
			//@search 是点击enter键 或者手机的右下角的键盘确认键触发  
			//使用的uview组件
				<u-search placeholder="请输入设备位置/设备型号"  @search='search'    
					v-model="inputText"></u-search> 
			</view>
		</view>
		<!-- 显示打印机区域 -->
		<block v-for="(item,index) in printList" :key="index"> 
			<view class="showPrint flex just-between" @click="selectNavPrint(item.title)">
				<view class="print-img">
					<image :src="item.url"></image>
				</view>
				<view class="flex-column">
					<!-- 编号 -->
					<view class="printNumber">
						{{item.title}}
					</view>
					<!-- 地址 -->
					<view class="flex printAddress">
						<!-- 定位图标 -->
						<view class="iconAddress">
							<image :src="item.icon"></image>
						</view>
						<!-- 地址信息 -->
						<view class="address">
							{{item.futitle}}
						</view>
					</view>
				</view>
				<view class="icon-next flex align-center">
					<image :src="item.arrow"></image>
				</view>
			</view>
		</block>

	</view>

js部分

export default{

		data(){
				printList: [{
						id: 1,
						url: '../../static/chart@2x.png',
						title: 'SDF10409160223',
						icon: '../../static/address@2x.png',
						futitle: '龙子湖区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
					{
						id: 2,
						url: '../../static/chart@2x.png',
						title: 'ZYX10409160223',
						icon: '../../static/address@2x.png',
						futitle: '金水区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
					{
						id: 3,
						url: '../../static/chart@2x.png',
						title: 'ERT10409160223',
						icon: '../../static/address@2x.png',
						futitle: '文化区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
					{
						id: 4,
						url: '../../static/chart@2x.png',
						title: 'SDF10409160223',
						icon: '../../static/address@2x.png',
						futitle: '龙子湖区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
				],
			}
		}

js逻辑

methods:{
search() {
				let list = [];
				this.printList.forEach((item, index) => {
					let str = this.inputText;//搜索框输入的查询内容
					let patt1 = new RegExp(str);  //把内容new regExp下
					let result = patt1.test(item.futitle); //搜索框(标题搜索)new regExp的内容是否包含在 数组的每一项里面
					let result2 = patt1.test(item.title);  //搜索框(编号搜索)new regExp的内容是否包含在 数组的每一项里面
					if (result || result2) {
						this.printList = [];
						list.push(item);
						this.printList = list;
					}
				})
			},
		}