vue3 api获得的值赋值给apiObj并显示

在Vue 3中，你可以使用计算属性(computed property)来将API获取的值转换成新的变量，并在组件的模板中显示。假设你有一个`getData()`方法用于从API获取数据，可以这样做：

<template>
  <div>
    {{ apiObj.value }}
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      apiObj: {}, // 初始化为空对象
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get("your-api-url");
        this.apiObj = {
          value: response.data, // 将API返回的值赋给apiObj.value
          // 如果需要，还可以添加其他属性如error等
        };
      } catch (error) {
        this.apiObj.error = error.message;
      }
    },
  },
  mounted() {
    this.fetchData(); // 获取数据并在组件挂载后立即执行
  },
  computed: {
    // 计算属性：当apiObj.value变化时，这个属性的值也会自动更新
    displayValue() {
      return this.apiObj.value;
    },
  },
};
</script>

在上述代码中，`fetchData()`方法用于从API获取数据，一旦数据获取成功，我们将其存储在`apiObj.value`上。同时，`displayValue`计算属性会监听`apiObj.value`的变化，使其在页面上实时显示。