[vue] vue3.x 前端列表搜索过滤

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

一、效果图

二、组件代码

<template>
	<div class="market-details-container">
		<input type="text" v-model="userSearch" placeholder="请输入姓名" />
		<ul>
			<li v-for="(v, k) in filterUserList" :key="k">姓名：{{ v.name }}，年龄：{{ v.age }}</li>
		</ul>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, getCurrentInstance } from 'vue';
export default defineComponent({
	name: 'marketDetails',
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			userSearch: '',
			userList: [],
		});
		onMounted(() => {
			for (let i = 0; i < 10; i++) {
				state.userList.push({
					id: Math.random(),
					name: `
					${unescape(`\\u${(Math.round(Math.random() * 20901) + 19968).toString(16)}`.replace(/\\/g, '%'))}${unescape(
						`\\u${(Math.round(Math.random() * 20901) + 19968).toString(16)}`.replace(/\\/g, '%')
					)}${unescape(`\\u${(Math.round(Math.random() * 20901) + 19968).toString(16)}`.replace(/\\/g, '%'))}
					`,
					age: (Math.random() * 20 + 18).toFixed(0),
				});
			}
		});
		const filterUserList = computed(() => {
			let { userSearch, userList } = proxy;
			let arr = [...userList];
			arr = userList.filter((v) => v.name.indexOf(userSearch) !== -1);
			return arr;
		});
		return {
			filterUserList,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.market-details-container {
	padding: 50px;
	ul {
		margin-top: 15px;
		li {
			padding: 5px 0;
		}
	}
}
</style>