vue3+ts通过input搜索数组中单独一个值并响应到数据上显示
时间: 2023-05-11 20:05:43 浏览: 198
可以使用computed属性和filter方法来实现。首先,在data中定义一个数组和一个搜索关键字的变量,然后在computed属性中使用filter方法过滤出符合搜索关键字的值,最后将过滤后的结果绑定到模板中即可。
示例代码如下:
```typescript
<template>
<div>
<input v-model="keyword" placeholder="请输入搜索关键字">
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface Item {
id: number;
name: string;
}
export default defineComponent({
data() {
return {
list: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
],
keyword: '',
};
},
computed: {
filteredList(): Item[] {
return this.list.filter((item: Item) => {
return item.name.includes(this.keyword);
});
},
},
});
</script>
```
当用户在输入框中输入关键字时,computed属性会自动更新过滤后的结果,从而实现搜索功能。
阅读全文