vue 列表数据过滤
时间: 2023-08-02 18:17:34 浏览: 56
在 Vue 中,可以使用计算属性或过滤器来进行列表数据的过滤。
1. 计算属性过滤:
在组件中定义一个计算属性,该属性返回过滤后的数据列表。可以使用 JavaScript 中的 filter() 方法对数据进行过滤。
例如:
```
<template>
<ul>
<li v-for="item in filteredList">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'orange'],
filterKey: ''
}
},
computed: {
filteredList() {
return this.list.filter(item => {
return item.includes(this.filterKey)
})
}
}
}
</script>
```
2. 过滤器过滤:
定义一个过滤器,该过滤器接收列表数据和过滤关键字作为参数,返回过滤后的数据列表。
例如:
```
<template>
<ul>
<li v-for="item in list | filterList(filterKey)">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'orange'],
filterKey: ''
}
},
filters: {
filterList(list, filterKey) {
return list.filter(item => {
return item.includes(filterKey)
})
}
}
}
</script>
```
以上两种方法都可以实现列表数据的过滤。具体使用哪种方法,可以根据实际情况选择。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)