Vue3+ts 过滤符合条件的数组

你可以利用 Vue3 的 computed 属性和 TypeScript 的类型注解来过滤符合条件的数组。

首先，你需要定义一个接口或类型别名来表示你的数组项的类型。例如，假设你的数组项是这样的：

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

接下来，你可以在你的 Vue3 组件中定义一个 computed 属性来过滤数组。例如，假设你的数组是这样的：

const users: User[] = [
  { id: 1, name: 'Alice', age: 30, email: 'alice@example.com' },
  { id: 2, name: 'Bob', age: 25, email: 'bob@example.com' },
  { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' },
  { id: 4, name: 'Dave', age: 40, email: 'dave@example.com' }
];

你可以定义一个 computed 属性来过滤符合条件的数组项。例如，如果你想过滤出年龄在 30 岁以下的用户，你可以这样做：

import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const users: User[] = [
      { id: 1, name: 'Alice', age: 30, email: 'alice@example.com' },
      { id: 2, name: 'Bob', age: 25, email: 'bob@example.com' },
      { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' },
      { id: 4, name: 'Dave', age: 40, email: 'dave@example.com' }
    ];

    const filteredUsers = computed(() => {
      return users.filter(user => user.age < 30);
    });

    return { filteredUsers };
  }
});

在上面的例子中，`filteredUsers` 属性是一个 computed 属性，它返回一个新的数组，其中只包含年龄在 30 岁以下的用户。

你可以在模板中使用 `filteredUsers` 属性来显示符合条件的数组项。例如，你可以这样做：

<template>
  <div>
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }} ({{ user.age }} years old)
      </li>
    </ul>
  </div>
</template>

在上面的例子中，`v-for` 指令会遍历 `filteredUsers` 数组中的每个用户，并为每个用户创建一个新的 `<li>` 元素。