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

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进行渲染。
渲染后的效果如图：
在这里插入图片描述