typescript在vue3中遍历数组

使用v-for遍历

可以使用v-for指令来循环遍历数据。下面是一个例子：

<template>
  <div>
    <ul>
      <li v-for="category in categoryList" :key="category.id">{{ category.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  setup() {
    const categoryList = ref([
      { id: 1, name: "Category 1" },
      { id: 2, name: "Category 2" },
      { id: 3, name: "Category 3" }
    ]);

    return { categoryList };
  }
};
</script>

在上面的例子中，我们使用了v-for指令来遍历categoryList数组中的数据，并将每个数据项渲染为一个li元素。其中:key属性用来指定每个li元素的唯一标识符。

使用forEach遍历

可以使用forEach()方法来遍历一个数组，以下是如何在 TypeScript 中使用 forEach() 方法遍历 categoryList 数组：

<script lang="ts">
    const categoryList = ref([
      { id: 1, name: 'Category 1' },
      { id: 2, name: 'Category 2' },
      { id: 3, name: 'Category 3' },
    ]);

    // 遍历 categoryList 数组
    categoryList.value.forEach((category) => {
      console.log(category.id, category.name);
    });
</script>

上面代码中的 forEach()方法接受一个回调函数作为参数，在每次迭代过程中执行该回调函数。回调函数会被传递当前迭代到的元素，可以在回调函数中对其进行处理。

需要注意的是，我们用 value 属性来获取 ref 对象中的值。因为 ref 对象本身并不是一个数组，而是一个带有 value 属性的对象，所以需要通过 value 属性来获取实际的值。