Question

我無法找到一種方法來選擇用於在v-for中渲染文本的不同選項。是否有可能或者我需要以不同的方式構建邏輯來完成類似下面的代碼？

<template> 
    <ul v-show="showNotifications"> 
     <li v-for="notification in notifications"> 
      // if notification.type = 'friend request' 
      New friend request from {{ notification.name }} 
      // else 
      New notification from {{ notification.name }} 
     </li> 
    </ul> 
</template> 

通知是一個包含名稱和通知類型數據的對象數組。

Answer 1

使用另一個template元件像以下（未測試）

<template> 
    <ul v-show="showNotifications"> 
     <li v-for="notification in notifications"> 
      <template v-if="notification.type == 'friend request'"> 
      New friend request from {{ notification.name }} 
      </template> 
      <template v-else> 
      New notification from {{ notification.name }} 
      </template> 
     </li> 
    </ul>