vue3 多条件搜索

Vue3 中的多条件搜索通常是在表单组件或者数据列表筛选功能中实现的，它允许用户输入多个关键词或者选择多个筛选条件来过滤展示的数据。这通常是通过 `v-model` 和数组绑定来管理用户的输入，并结合 `filter()` 或者自定义的过滤函数来动态地筛选数据。

举个例子：

<template>
  <form @submit.prevent="search">
    <input v-model="filters.keyword" placeholder="关键词">
    <select v-model="filters.category" multiple>
      <option value="category1">类别1</option>
      <!-- 更多选项 -->
    </select>
    <button>搜索</button>
  </form>
  <ul>
    <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      filters: { keyword: '', category: [] }, // 初始化筛选条件
      allData: [], // 存放所有数据
      filteredData: [], // 显示的数据
    };
  },
  computed: {
    filteredData() {
      return this.allData.filter(item => {
        let match = true;
        if (this.filters.keyword) {
          match &= item.name.includes(this.filters.keyword);
        }
        if (this.filters.category.length) {
          match &= this.filters.category.includes(item.category);
        }
        return match;
      });
    },
  },
  methods: {
    search() {
      // 实现完整的搜索逻辑并更新filteredData
    },
  },
};
</script>

在这个例子中，当用户改变关键词或选择分类时，`filteredData` 计算属性会根据当前的筛选条件实时更新显示的结果。