vue 列表题库 多条件过滤
时间: 2023-07-24 13:33:36 浏览: 44
你可以使用 Vue.js 的计算属性来实现多条件过滤。以下是一个简单的例子:
在你的 Vue 组件中,你需要定义一个包含所有题目的数组,例如:
```javascript
data() {
return {
questions: [
{ id: 1, title: '题目1', difficulty: 'easy', type: 'single' },
{ id: 2, title: '题目2', difficulty: 'medium', type: 'multiple' },
{ id: 3, title: '题目3', difficulty: 'hard', type: 'single' }
],
filters: {
difficulty: '',
type: ''
}
}
}
```
在上面的代码中,`questions` 数组包含了所有的题目,`filters` 对象包含了你需要过滤的条件。
接下来,你可以定义一个计算属性来根据过滤条件过滤题目:
```javascript
computed: {
filteredQuestions() {
return this.questions.filter(question => {
// 根据 difficulty 过滤
if (this.filters.difficulty && question.difficulty !== this.filters.difficulty) {
return false;
}
// 根据 type 过滤
if (this.filters.type && question.type !== this.filters.type) {
return false;
}
// 如果所有条件都满足,则返回 true
return true;
});
}
}
```
在上面的代码中,`filteredQuestions` 计算属性会根据 `filters` 对象中的条件过滤 `questions` 数组中的题目。如果某个题目不符合过滤条件,则会被过滤掉。
最后,你可以在模板中使用 `filteredQuestions` 数组来渲染题目列表:
```html
<ul>
<li v-for="question in filteredQuestions" :key="question.id">
{{ question.title }}
</li>
</ul>
```
在上面的代码中,`v-for` 指令会循环渲染 `filteredQuestions` 数组中的每个题目,并将题目的标题显示在列表中。
这就是一个简单的使用 Vue.js 实现多条件过滤的例子。当然,你也可以根据你的具体需求来修改以上代码。