v-if and v-else inside of v-for for different text rendering

Question

I can't find a way to choose different options for rendering text inside of v-for. Is it possible or do I need to structure the logic differently to do something like the code below?

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

Notification is a array of objects with data like name and notification type.

Answer 1

Use another template element like following (not tested)

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