react中的循环

react中循环：map

import React, { Component } from 'react';
interface IState {
    dataList: ILesson[]
}

interface ILesson {
    title: string
    qq: string
}

class Admin extends Component<any, IState> {
    constructor(props: any) {
        super(props)
        this.state = {
            dataList: []
        }
    }
    componentDidMount() {
        const dataList: ILesson[] = []
        for (let i = 0; i < 10; i++) {
            dataList.push({
                title: 'react +ts +antd+mobx 开发企业级中台系统',
                qq: 'QQ群：976961880'
            })
        }
        this.setState({
            dataList: dataList
        })
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.dataList.map((lesson: ILesson, index: number) => (<li key={index}>{lesson.title + '--' + lesson.qq}</li>))}
                </ul>
            </div>
        );
    }
}

export default Admin;

运行效果

vue3中使用v-for进行循环

<template>
  <ul>
    <li v-for="(data, index) in listState.dataList" :key="index">
      {{ data.title + data.qq }}
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
interface ILesson {
  title: string;
  qq: string;
}
interface IListState {
  dataList: ILesson[];
}
export default defineComponent({
  setup() {
    const listState = reactive<IListState>({
      dataList: [],
    });
    const dataList: ILesson[] = [];
    for (let i = 0; i < 10; i++) {
      dataList.push({
        title: "vue3 +ts +antd+vuex 开发企业级中台系统",
        qq: "QQ群：976961880",
      });
    }
    listState.dataList = dataList;
    return {
      listState,
    };
  },
});
</script>

运行效果