v-for 内部的 v-if 和 v-else 用于不同的文本渲染 [英] v-if and v-else inside of v-for for different text rendering

问题描述

我找不到在 v-for 中选择不同选项来呈现文本的方法.是否有可能或者我是否需要以不同的方式构建逻辑来执行类似于下面的代码的操作?

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 是一个包含名称和通知类型等数据的对象数组.

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

推荐答案

使用另一个 template 元素，如下所示(未测试)

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>

这篇关于v-for 内部的 v-if 和 v-else 用于不同的文本渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！