vue多条件查询

多条件查询"/>

vue多条件查询

<template><div><input type="text" v-model="keyword" placeholder="关键字"><select v-model="category"><option value="">所有分类</option><option v-for="cat in categories" :value="cat">{{ cat }}</option></select><button @click="search">查询</button><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }} - {{ item.category }}</li></ul></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const keyword = ref('');const category = ref('');const items = ref([{ id: 1, name: '物品1', category: '分类1' },{ id: 2, name: '物品2', category: '分类2' },{ id: 3, name: '物品3', category: '分类1' },{ id: 4, name: '物品4', category: '分类3' }]);const categories = ['分类1', '分类2', '分类3'];const filteredItems = computed(() => {return items.value.filter(item => {const isMatchingKeyword = item.name.toLowerCase().includes(keyword.value.toLowerCase());const isMatchingCategory = !category.value || item.category === category.value;return isMatchingKeyword && isMatchingCategory;});});const search = () => {// 执行搜索逻辑（例如调用接口）// 根据输入框和条件筛选出匹配的项// 更新 filteredItems};return {keyword,category,categories,filteredItems,search};}
};
</script>

在上述例子中，我们使用了Vue 3的ref和computed函数。首先，我们创建了名为keyword、category和items的响应式引用。然后，我们使用computed函数创建了一个计算属性filteredItems，该属性根据输入框的关键字和选择的分类筛选出匹配的项。