vue3计算属性筛选对象
时间: 2023-09-22 18:06:07 浏览: 118
Vue计算属性的学习笔记
在Vue 3中,你可以使用计算属性来筛选对象。首先,确保你的数据对象已经在Vue实例的data选项中定义。然后,你可以通过定义一个计算属性来进行筛选。
假设我们有一个包含多个对象的数组,每个对象都有一个属性name。我们想要筛选出名字包含特定字符串的对象。下面是一个示例:
```html
<template>
<div>
<input type="text" v-model="filter">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Tom' },
{ id: 4, name: 'Alice' }
],
filter: ''
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.includes(this.filter));
}
}
}
</script>
```
在上面的示例中,我们使用了一个input元素来绑定filter变量,这样当用户输入时,filter的值会自动更新。然后,我们在computed属性filteredItems中对items进行筛选,只返回符合条件的对象。
这样,当用户输入特定字符串时,列表中只会显示包含该字符串的对象。以上就是使用Vue 3计算属性来筛选对象的基本示例。
阅读全文