vue实现搜索结果分类

要实现搜索结果的分类，可以使用Vue的计算属性和v-for指令来动态渲染结果列表。

首先，定义一个包含所有结果的列表，然后使用计算属性根据分类来过滤结果。例如，假设有三种分类“电影”、“音乐”和“书籍”，则可以定义一个组件：

<template>
  <div>
    <input v-model="searchText" @input="updateSearch" />
    <ul>
      <li v-for="result in filteredResults" :key="result.id">
        {{ result.title }} - {{ result.category }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: [
        { id: 1, title: "Avatar", category: "电影" },
        { id: 2, title: "The Dark Knight", category: "电影" },
        { id: 3, title: "Thriller", category: "音乐" },
        { id: 4, title: "Harry Potter", category: "书籍" },
      ],
      searchText: "",
    };
  },
  computed: {
    filteredResults() {
      return this.results.filter((result) => {
        return result.title.toLowerCase().includes(this.searchText.toLowerCase());
      });
    },
    movies() {
      return this.filteredResults.filter((result) => {
        return result.category === "电影";
      });
    },
    books() {
      return this.filteredResults.filter((result) => {
        return result.category === "书籍";
      });
    },
    music() {
      return this.filteredResults.filter((result) => {
        return result.category === "音乐";
      });
    },
  },
  methods: {
    updateSearch(event) {
      this.searchText = event.target.value;
    },
  },
};
</script>

上述代码中，results是所有搜索结果的列表，searchText是搜索框中的文本。filteredResults是过滤后的结果列表，它会根据searchText过滤出包含搜索词的结果。movies、books、music是根据分类过滤后的结果列表，它们分别用v-for指令进行渲染。

在模板中使用filteredResults，movies、books、music即可实现按分类显示搜索结果。