Vue+Quasar如何根据API返回的通知类型ID动态渲染不同div模板

解决方案1：使用v-if/v-else-if分支判断（适合模板类型少的场景，当前需求用这个最直接） #

直接在你现有循环的q-card内部，根据event.type的值渲染对应内容即可，示例代码如下：

<q-card
  class="no-padding"
  style="height: 150px;"
  v-for="event in joinedEvents"
  :key="event.id" 
  flat
>
  <!-- 类型1：展示图片 -->
  <div v-if="event.type === 1">
    <img :src="event.imageUrl" alt="通知配图">
    <span>{{ event.content }}</span>
  </div>
  <!-- 类型2：展示按钮 -->
  <div v-else-if="event.type === 2">
    <span>{{ event.content }}</span>
    <q-btn label="处理" color="primary" @click="handleEvent(event)" />
  </div>
  <!-- 可扩展更多类型分支，v-else作为兜底展示 -->
  <div v-else>
    {{ event.content }}
  </div>
</q-card>

注意：如果你的type字段是字符串类型，把判断条件里的数字改成对应的字符串即可，比如event.type === '1'

解决方案2：使用Vue动态组件（适合通知类型多、后续需要频繁新增模板的场景，方便维护） #

如果后续你的通知类型会扩展到5种以上，建议把每种类型的模板抽成单独的组件，用Vue的动态组件component来渲染，维护起来更清爽：

1. 先按类型注册对应的单文件组件，比如NoticeType1.vue、NoticeType2.vue
2. 循环的时候动态绑定is属性即可：

<q-card
  class="no-padding"
  style="height: 150px;"
  v-for="event in joinedEvents"
  :key="event.id" 
  flat
>
  <component :is="`NoticeType${event.type}`" :event="event" />
</q-card>

这种方案的优势是每个类型的模板逻辑独立，修改不会互相影响，适合复杂度较高的项目。

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