过滤Vue3响应式数组
时间: 2023-08-07 08:28:20 浏览: 46
在Vue3中,可以使用 `computed` 和 `watchEffect` 来过滤响应式数组。
下面是使用 `computed` 来过滤响应式数组的示例代码:
```javascript
import { ref, computed } from 'vue'
const list = ref([
{ id: 1, name: 'apple', category: 'fruit' },
{ id: 2, name: 'banana', category: 'fruit' },
{ id: 3, name: 'carrot', category: 'vegetable' },
{ id: 4, name: 'orange', category: 'fruit' },
])
const filteredList = computed(() => {
return list.value.filter(item => item.category === 'fruit')
})
```
在上面的代码中,我们使用 `computed` 创建了一个新的响应式数组 `filteredList`,它会根据 `list` 数组中的元素进行过滤,只保留 `category` 为 'fruit' 的元素。
如果你需要在过滤条件发生变化时重新过滤数组,可以使用 `watchEffect` 监听过滤条件的变化,示例代码如下:
```javascript
import { ref, computed, watchEffect } from 'vue'
const list = ref([
{ id: 1, name: 'apple', category: 'fruit' },
{ id: 2, name: 'banana', category: 'fruit' },
{ id: 3, name: 'carrot', category: 'vegetable' },
{ id: 4, name: 'orange', category: 'fruit' },
])
const filterCategory = ref('fruit')
const filteredList = computed(() => {
return list.value.filter(item => item.category === filterCategory.value)
})
watchEffect(() => {
filteredList.value // 重新过滤数组
})
```
在上面的代码中,我们创建了一个新的响应式变量 `filterCategory`,用于存储过滤条件。然后,我们使用 `watchEffect` 监听 `filterCategory` 的变化,并在回调函数中重新过滤数组。当 `filterCategory` 发生变化时,`filteredList` 会自动更新。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)