循环遍历，怎样添加其他非文本内容_为什么我新创建的cordova没有res目录-优快云博客

本文探讨在VUE框架中如何在循环遍历数组时，不仅显示文本内容，还能灵活地插入图片和按钮等不同类型的元素。通过条件渲染和键值对的巧妙运用，实现界面元素的多样化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经历的少，竟然只知道，循环遍历中，数组中写的是文本，如果要添加图片，按钮，竟然慌了，细细一想，可能答案就在我自己的问题中。“如果。。。如果。。。”对吧？答案就在此,使用if就解决了，键值对多添加一个内容就可以了，图片url,按钮btn

在这里插入图片描述

<v-card-text>
   <v-expansion-panel>
     <v-expansion-panel-content v-for="(item,i) in items" :key="i">
       <div slot="header">{{item.title}}</div>
       <v-card-text v-if="i == 0 || i == 2 || i == 3" class="grey lighten-3">
       		{{item.content}}
       </v-card-text>
       <v-img v-if="i == 1" :src="join">
       </v-img>
       <v-btn v-if="i == 4" color="red darken-1" flat>
       	    update
       </v-btn>
     </v-expansion-panel-content>
   </v-expansion-panel>
 </v-card-text>
------------------------------------------------------
 items: [
        { title: "Version", content: "0.3.1" },
        {
          title: "Join us",
          content: "",
          url: require("../assets/img/1.png")
        },
        {
          title: "",
          content:""
        },
        { title: "Service agreement", content: "" },
        { title: "New version" }
      ]