Vue3 个人信息组件：使用 Axios 在 created 生命周期中获取数据并渲染

<template>
  <div class='MySelf'>
    <div class='title'>
      <h1>个人信息</h1>
    </div>
    <div class='MySelf-body'>
      <div>我的账号：<input type='text' :value='account'></div>
      <div>我的名称：<input type='text' :value='name'></div>
      <div>我的积分：<input type='text' :value='score'></div>
      <div>我的等级：<input type='text' :value='level'></div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  name: 'MySelf',
  data() {
    return {
      account: '',
      name: '',
      score: '',
      level: ''
    }
  },
  created() {
    axios.post('/api/getMyInfo')
      .then(res => {
        const data = res.data
        this.account = data.account
        this.name = data.name
        this.score = data.score
        this.level = data.level
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>
<style scoped>
.MySelf {
  width: 600px;
  height: 600px;
  border: 5px solid white;
  margin-top: 100px;
  margin-left: 400px;
}

.title {
  border-bottom: 5px solid black;
  text-align: center;
}
</style>