vue3 filter使用方法
时间: 2024-08-12 19:10:05 浏览: 80
Vue 3 中的 `filter` 是用于处理数组数据的内置过滤器,它可以在模板渲染时对数据进行简单的计算或转换。`filter()` 方法允许你在数组中筛选出满足特定条件的元素。使用方法如下:
1. **在模板中使用**:
在 HTML 模板中,你可以直接在 `v-for` 循环后调用 `filter()`,如下所示:
```html
<ul>
<li v-for="item in items | filter:searchText" :key="item.id">{{ item.name }}</li>
</ul>
```
这里 `items | filter:searchText` 表示对 `items` 数组应用一个名为 `filter` 的过滤器,其参数是 `searchText`。
2. **定义过滤器函数**:
首先,你需要在 Vue 实例的 `filters` 对象中定义你的自定义过滤器函数。例如,创建一个名为 `customFilter` 的过滤器来过滤包含特定关键词的项:
```javascript
export default {
data() {
return {
searchText: "",
items: ... // 假设这是一个数组
};
},
filters: {
customFilter(value, search) {
return value.filter(item => item.includes(search));
}
}
}
```
3. **在模板中引用自定义过滤器**:
现在你可以使用 `customFilter` 过滤器了:
```html
<ul>
<li v-for="item in items | customFilter: searchText" :key="item.id">{{ item.name }}</li>
</ul>
```
阅读全文