从 React 到 Vue，如何使用 .map 方法遍历数组？

我正在使用 vue 并且来自反应背景。React 有这个称为 .map 的方法，如果你将数组作为 props 传入，那么它会多次渲染该组件，具体取决于数组中的项目数量并从索引中提取每个数据。像这样：

function App() {
const classes = useStyles();
const [finance, setFinance] = useState([]);

useEffect(() => {
    axios
        .all([
            axios.get(
                `https://cloud.iexapis.com/stable/stock/market/collection/list?collectionName=gainers&token=XXXXXXXXXXXXXXXXXXXXX`
            ),
        ])

        .then((res) => {
            setFinance(res[0].data);
        })
        .catch((err) => {
            console.log(err);
        });
}, []);

const cardList = finance.map((company, index) => (
    <Grid item xs={10} sm={5} md={4} lg={3} xl={2}>
        <Cards company={company} index={index} />
    </Grid>
));

基本上，finance是一种存储数组中所有数据的状态。我将该数据company作为道具传递给Cards组件。这有效，我正在尝试在 vue 中复制这种效果。到目前为止，这是我的代码：

<template>
  <v-container>
    <v-row align="start" justify="center">
      <v-col xs="12" sm="6" md="4" lg="3">
        <cards :crypto="crypto[0]" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import cards from "@/components/cards.vue";

export default {
  data() {
    return {
      crypto: []
    };
  },
  components: { cards },
  mounted() {
    this.axios
      .get(
        "https://min-api.cryptocompare.com/data/top/totalvolfull?limit=20&tsym=USD&api_key=xxxxxxxxxxxxxxxxxxx"
      )
      .then(response => {
        this.crypto = response.data.Data;
        console.log(response.data.Data);
      })
      .catch(error => console.log(error));
  }
};
</script>

如你所见，crypto是我cards在 Vue.js 中传递给组件的一个数据属性。我想要做的与我在 React 中所做的完全相同，而我将对象数组传递给组件，组件根据数组对象的数量进行多次渲染，同时从相应的对象中获取数据指数。我尝试执行 v-for 指令，但我认为这只适用于列表？任何帮助表示赞赏。

注意：这是我的 Vue 项目的 Card 组件用于上下文：

<template>
  <v-card class="mx-auto" max-width="344" outlined>
    <v-list-item three-line>
      <v-list-item-content>
        <div class="overline mb-4">{{ crypto.CoinInfo.FullName }}</div>
        <v-list-item-title class="headline mb-1">{{
          crypto.CoinInfo.Name
        }}</v-list-item-title>
        <v-list-item-subtitle
          >Price: {{ crypto.DISPLAY.USD.PRICE }}<br />Change :
          {{ crypto.DISPLAY.USD.CHANGEDAY }}</v-list-item-subtitle
        >
      </v-list-item-content>

      <!-- <v-list-item-avatar tile size="80" -->
      <img
        style="height: 80px;"
        :src="`https://www.cryptocompare.com/${crypto.CoinInfo.ImageUrl}`"
      />
      <!-- </v-list-item-avatar> -->
    </v-list-item>

    <v-card-actions>
      <v-btn text>Save</v-btn>
      <v-btn text>Check</v-btn>
    </v-card-actions>
  </v-card>
</template>
<script>
export default {
  props: {
    crypto: Object
  }
};
</script>