如何使用Vue在独立div卡片中展示后端获取的多份数据？

这其实是Vue里非常常见的列表渲染场景，用v-for指令就能轻松搞定，我给你一步步拆解实现方法：

• 第一步：准备Vue基础结构与数据定义
  首先创建Vue实例，在data里定义一个空数组（比如cardList），用来存储从后端获取到的多份数据。

• 第二步：用v-for循环渲染卡片
  在模板里，针对你的卡片结构，用v-for遍历cardList数组，每一项生成一个独立的卡片。记得一定要给每个循环项绑定唯一的key（通常用数据里的唯一ID），这能帮助Vue高效地更新DOM。

• 第三步：从后端获取数据并更新数组
  通过mounted钩子（或者你需要的触发时机）发起请求，拿到后端数据后赋值给cardList，Vue会自动响应数据变化，渲染对应的卡片。

下面是完整的代码示例：

<!-- HTML部分 -->
<div id="app">
  <!-- 循环渲染卡片，每个卡片对应cardList里的一项 -->
  <div 
    class="card" 
    v-for="(cardItem, index) in cardList" 
    :key="cardItem.id || index" <!-- 优先用唯一ID，没有的话用index（不推荐频繁更新的列表） -->
  >
    <!-- 这里填充对应的数据，比如卡片标题、内容等 -->
    <h3>{{ cardItem.title }}</h3>
    <p>{{ cardItem.content }}</p>
    <!-- 其他需要展示的数据字段，根据你的实际需求调整 -->
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 如果用Vue3的话，引入对应的CDN -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
<script>
new Vue({
  el: '#app',
  data() {
    return {
      cardList: [] // 初始化空数组存储后端数据
    }
  },
  mounted() {
    // 模拟后端请求，实际项目中换成你的接口地址
    this.fetchCardData()
  },
  methods: {
    async fetchCardData() {
      try {
        // 这里用fetch示例，你也可以用axios等库
        const response = await fetch('你的后端接口地址')
        const data = await response.json()
        // 将后端返回的数据赋值给cardList，Vue会自动渲染卡片
        this.cardList = data
      } catch (error) {
        console.error('获取卡片数据失败:', error)
      }
    }
  }
})
</script>

补充：Vue3组合式API写法 #

如果你的项目用的是Vue3组合式API，核心思路不变，写法略有调整：

<div id="app">
  <div class="card" v-for="item in cardList" :key="item.id">
    <h3>{{ item.title }}</h3>
    <p>{{ item.content }}</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref, onMounted } = Vue
createApp({
  setup() {
    const cardList = ref([])

    const fetchCardData = async () => {
      const res = await fetch('你的后端接口')
      cardList.value = await res.json()
    }

    onMounted(() => {
      fetchCardData()
    })

    return { cardList }
  }
}).mount('#app')
</script>

注意事项 #

• 确保后端返回的数据是数组格式，这样v-for才能正常遍历。如果后端返回的是对象结构，你可能需要先把它转换成数组再使用。
• 尽量避免用index作为key（除非列表不会新增、删除或排序），否则可能导致DOM更新异常。

内容的提问来源于stack exchange，提问作者Donald