vue3实现搜索功能

vue3通过双向数据绑定、filter过滤实现搜索功能

<template>
	<div>
		<input type="text" v-model="search">
		<button @click="searchBtn">搜索</button>
	</div>
	<p v-for="(item) in tableDataTwo">{{item.name}}</p>
</template>

<script>
	import {ref} from'vue'
	export default{
		setup() {
			const search=ref('') //搜索框数据绑定
			const tableData = ref([
				{
					name:'张三'
				},
				{
					name:'李四'
				},
				{
					name:'王五'
				},
				{
					name:'孙六'
				}
			])
			const tableDataTwo=ref([])
			const searchBtn=()=>{
				let sea = search.value
				if (sea) {
					tableDataTwo.value = tableData.value.filter(function(a) { //通过鲁律数据赋值给新数组可实现重复搜索
						return Object.keys(a).some(function(key) {
							return String(a['name']).toLowerCase().indexOf(sea) > -1
						})
					})
				}
			}
			return{
				search,
				searchBtn,
				tableDataTwo
			}
		}
	}
</script>