vue 简单使用 axios 渲染数据动态渲染

重复渲染

接口：http://localhost:8080/home/wrapper/list
请求数据：

{
    "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="">
</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="">
        <!-- 不拼接的情况 -->
        <img :src="item.image" alt="">
    </div>