使用vue3+ts 寻找符合条件的数组

可以使用Vue3的computed属性来寻找符合条件的数组。

假设我们有一个数组`items`，我们想要寻找其中所有`price`大于100的元素。可以使用以下代码：

import { computed, Ref } from 'vue'

interface Item {
  name: string
  price: number
}

export default {
  setup() {
    const items: Ref<Item[]> = ref([
      { name: 'Item A', price: 50 },
      { name: 'Item B', price: 120 },
      { name: 'Item C', price: 80 },
      { name: 'Item D', price: 150 }
    ])

    const expensiveItems = computed(() => {
      return items.value.filter(item => item.price > 100)
    })

    return {
      items,
      expensiveItems
    }
  }
}

在上面的代码中，我们定义了一个`computed`属性`expensiveItems`，它返回一个新的数组，其中包含所有`price`大于100的元素。我们可以在模板中使用`expensiveItems`来获取这个数组，而不必手动过滤它。

<template>
  <div>
    <h2>All items:</h2>
    <ul>
      <li v-for="item in items" :key="item.name">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>

    <h2>Expensive items:</h2>
    <ul>
      <li v-for="item in expensiveItems" :key="item.name">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>