本文共 1247 字，大约阅读时间需要 4 分钟。

在 Vue 中，可以通过计算属性和过滤器来实现将数据分组展示的功能。 首先，需要将数据按照分组条件进行分组，可以使用 `reduce` 方法来实现。例如，假设有一个数组 `data`，其中每个元素都有一个 `group` 属性，表示该元素所属的分组，可以使用以下代码将数据按照分组条件进行分组： script const groups = data.reduce((result, item) => {   const group = item.group;   if (!result[group]) {     result[group] = [];   }   result[group].push(item);   return result; }, {}); 上述代码中，`reduce` 方法的第一个参数是一个回调函数，该函数接受两个参数：累加器和当前元素。在每次迭代中，回调函数会将当前元素添加到对应的分组中。最终，`reduce` 方法会返回一个对象，其中每个属性都是一个分组，对应的值是该分组中的元素数组。 接下来，可以使用计算属性和过滤器将分组数据展示出来。例如，可以定义一个计算属性 `groupedData`，该属性返回一个数组，其中每个元素都是一个对象，表示一个分组。每个分组对象包含两个属性：`name` 表示分组名称，`items` 表示该分组中的元素数组。可以使用以下代码实现： script computed: {   groupedData() {     return Object.keys(groups).map(group => ({       name: group,       items: groups[group]     }));   } } 上述代码中，`Object.keys(groups)` 方法返回一个数组，其中包含了所有分组的名称。然后，使用 `map` 方法将每个分组名称转换为一个分组对象，该对象包含了分组名称和对应的元素数组。 最后，可以使用 `v-for` 指令和过滤器将分组数据展示出来。例如，可以使用以下代码将分组数据展示为一个表格： html <table>   <thead>     <tr>       <th>分组名称</th>       <th>元素数量</th>     </tr>   </thead>   <tbody>     <tr v-for="group in groupedData" :key="group.name">       <td>{{ group.name }}</td>       <td>{{ group.items.length }}</td>     </tr>   </tbody> </table> 上述代码中，`v-for` 指令用于遍历 `groupedData` 数组，将每个分组展示为一行表格。同时，使用 `{{ group.name }}` 和 `{{ group.items.length }}` 表达式分别展示分组名称和元素数量。如果需要展示分组中的具体元素，可以使用嵌套的 `v-for` 指令和过滤器来实现。