Vuejs2 v-if和v-else位于v-for内部，用于不同的文本渲染

我找不到一种方法来选择不同的选项来渲染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>

//if notification.type='friend request'
来自{{notification.name}的新好友请求
//否则
来自{{notification.name}的新通知

---

通知是具有名称和通知类型等数据的对象数组。

使用另一个

模板

元素，如以下（未测试）

来自{{notification.name}的新好友请求
来自{{notification.name}的新通知

---

我按照Xymanek所说的做了，但这并不完全适用于我，我还添加了一个类似的方法，因为我意识到组件对“v-for”（在本例中为“notifications”）中的变量有反应

正如我们所见，这只是通过将一个伪对象推送到数组来强制v-for“重新渲染”。

---

您可以在“notification.type”值更改后立即调用此方法。

Hi，如果您有特定问题，请通过点击询问社区。如果您需要对其他用户已经给出的答案进行进一步解释，请通过。然后，用户将收到一个通知，即您对他/她的答案发表了评论

<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>

forceReload(){
      this.files.push(fakeNotification);
      this.files.pop();
    }