- 当需要根据已有数据计算出一些新的数据时，如数组过滤、映射等。
假设我们有一个用户列表，每个用户都有一个年龄属性。我们想要创建一个新的计算属性，该属性只包含年龄大于18岁的用户。
javascript复制代码
data() {
return {
users: [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 17 },
{ name: 'Charlie', age: 22 }
]
};
},
computed: {
adultUsers() {
// 使用数组的filter方法过滤出年龄大于18岁的用户
return this.users.filter(user => user.age > 18);
}
}
在这个例子中，adultUsers是一个计算属性，它基于users数组动态计算出年龄大于18岁的用户列表。当users数组发生变化时（例如添加新用户或删除现有用户），adultUsers会自动更新以反映这些变化。
2. 当一个数据依赖于其他数据的动态计算时，如根据用户输入的搜索关键词过滤数据列表。
假设我们有一个商品列表，并且用户可以在输入框中输入搜索关键词来过滤商品。我们可以使用计算属性来根据用户的输入动态计算过滤后的商品列表。
html复制代码
<template>
<div>
<input v-model="searchQuery" placeholder="Search for products...">
<ul>
<li v-for="product in filteredProducts" :key="product.id">{{ product.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
products: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
};
},
computed: {
filteredProducts() {
// 使用数组的filter方法和toLowerCase()函数来过滤商品列表
// 根据用户的搜索关键词进行不区分大小写的匹配
return this.products.filter(product =>
product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}
};
</script>
