vue从数据获取符合条件的个数
时间: 2023-07-27 10:18:49 浏览: 55
如果你想要获取符合条件的数据的个数,可以使用 Vue.js 中的计算属性(Computed Property)。你可以在计算属性中使用 JavaScript 的 filter() 方法来过滤数据,并返回符合条件的数据的个数。下面是一个示例代码:
```
<template>
<div>
<p>符合条件的数据的个数为: {{ filteredDataLength }}</p>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
{ id: 4, name: '赵六', age: 35 }
],
filterAge: 25
}
},
computed: {
filteredDataLength() {
return this.data.filter(item => item.age > this.filterAge).length
}
}
}
</script>
```
在上面的代码中,我们定义了一个名为 `filteredDataLength` 的计算属性,它使用了 JavaScript 的 filter() 方法来过滤数据,并返回符合条件的数据的个数。在模板中,我们使用 `{{ filteredDataLength }}` 来显示符合条件的数据的个数。