Loading... # vue 简单使用 axios 渲染数据动态渲染 ## 重复渲染 接口：http://localhost:8080/home/wrapper/list 请求数据： ```json { "total": 5, "rows": [ { "createBy": null, "createTime": null, "updateBy": null, "updateTime": null, "remark": null, "id": 1, "title": "Title10", "description": "MAIN PRODUCTS", "image": "/profile/upload/2025/02/03/page1_20250203235143A010.jpg" }, { "createBy": null, "createTime": null, "updateBy": null, "updateTime": null, "remark": null, "id": 2, "title": "title02", "description": "MAIN PRODUCTS", "image": "/profile/upload/2025/02/03/page2_20250203235159A011.jpg" }, { "createBy": null, "createTime": null, "updateBy": null, "updateTime": null, "remark": null, "id": 3, "title": "title03", "description": "MAIN PRODUCTS", "image": "/profile/upload/2025/02/03/page4_20250203235212A012.jpg" }, ], "code": 200, "msg": "查询成功" } ``` 需要渲染的 html： ``` <div> <h1></h1> <p></p> <img src="" alt="" style=""> </div> ``` ## 实现 将标题、描述、图片渲染出来 js部分，获取数据使用 setup： ``` <script setup lang="ts"> import { ref, onMounted } from 'vue'; import axios from 'axios'; // 创建 ref来存储首页轮播数据 const carouselItems = ref([]); // 载时获取首页轮播数据 onMounted(async () =>{ // 获取首页轮播数据 const { data } = await axios.get('/dev-api/home/wrapper/list') // 成功返回时，将数据添加到carouselItems中 if (data.code === 200){carouselItems.value = data.rows} }); </script> ``` template: ``` <div v-for="(item, index) in carouselItems" :key="item.id"> <h1>{{ item.title }}</h1> <p>{{ item.description }}</p> <!-- 需要拼接的时候 --> <img :src="`/dev-api${item.image}`" alt="" style=""> <!-- 不拼接的情况 --> <img :src="item.image" alt="" style=""> </div> ``` 最后修改：2025 年 04 月 09 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～