v-if和v-else在v-for内部用于不同的文本呈现

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>