Question

我找不到一种方法来选择不同的选项来渲染v-for中的文本。是否可能或者我是否需要以不同的方式构造逻辑以执行类似下面的代码？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="content left" style="float: left;">
  <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div>
</span>
<span class="content" style="float: right">

</span>

通知是一个包含名称和通知类型等数据的对象数组。

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>

Answer 2

我做了Xymanek所说的，但对我来说完全不起作用，我还添加了这样的方法，因为我意识到该组件对“ v-for”中的变量具有反应性，在这种情况下为“通知”

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

可以看到，这只是通过将伪对象推到数组来强制v-for“重新渲染”。您可以在“ notification.type”的值更改后立即调用此方法。

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

2 个答案: