vue3保存后端多种数据类型并在前端显示

该段代码展示了在Vue的setup语法糖中,如何使用reactive创建响应式对象test,并在组件挂载后通过HTTP请求更新test的属性aa和bb。onMounted钩子用于在组件渲染后执行异步数据获取。
摘要由CSDN通过智能技术生成

 ref定义基本数据类型,reactive定义引用数据类型

<template>
    <div> 
        <p class="aaa">{{test.aa}}</p>
    </div>
    <div> 
        <p class="aaa">{{test.bb}}</p>
    </div>
</template>

<script setup>

const test= reactive({
  aa: '',
  bb: ''
})

onMounted(() => {
    http.get('xxx/xxx', {}).then(r => {
    test.aa= r.xxx.xx
    test.bb= r.xxx.xx
})
})

</script>
<style>
</style>

Vue 3中结合TypeScript(简称TS),获取后端数据通常会涉及以下几个步骤: 1. 安装依赖:首先你需要安装axios库,用于发起HTTP请求,以及`@types/axios`提供TypeScript支持。可以通过npm或yarn命令行工具安装: ``` npm install axios @types/axios // 或者 yarn add axios typescript ``` 2. 引入配置:在项目中创建一个axios实例,并配置基础URL(如果需要的话): ```typescript import axios from 'axios'; const service = axios.create({ baseURL: process.env.BASE_API || 'http://your-backend-url.com', // API地址 timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json' } // 默认请求头 }); ``` 3. 创建组件:在你的组件里,你可以使用`async`和`await`关键字来异步获取数据,定义一个data()函数返回一个Promise: ```typescript export default { data() { return { loading: false, error: null, items: [] as any[], // 使用any类型占位,直到后端数据结构确定 }; }, async mounted() { try { this.loading = true; const response = await service.get('/api/items'); // 替换为实际的API路径 if (response.data) { this.items = response.data; // 将响应数据赋值给items } else { this.error = 'Failed to fetch data'; } this.loading = false; } catch (error) { this.error = error.message; this.loading = false; } }, }; ``` 4. 类型提示:为了让IDE更好地理解你的数据类型,可以对从后端返回的数据进行类型定义,例如: ```typescript interface ItemResponse { data: Array<Item>; } type Item = { id: number; name: string; // 其他字段... }; // 在接口回调中指定返回值类型 const response: ItemResponse = await service.get<Item[]>('/api/items'); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值