时间戳

首页 > 解决方案 > 根据属性有条件地仅渲染一次图标

vue.js - 根据属性有条件地仅渲染一次图标

问题描述

我正在尝试编写一个显示图标 AAA 或图标 BBB 的模板，具体取决于当前迭代中的项目是否具有特定标志。这是我的代码：

<div v-for="(item, itemIndex) in items">
    <div v-if="item.hasUnreadComments">
        <span>Display Icon AAA</span>
    </div>
    <div v-else>
        <span>Display Icon BBB</span>
    </div>
</div>

这里的问题是我需要显示一次图标。如果不止一项设置为item.hasUnreadComments === true，图标 AAA 将显示相同的次数，这不是我想要的。在文档中找不到任何内容，我不想将其绑定到 v-model。

如果没有第三个数据变量用作标志，这可以在 Vue 中完成吗？

标签： vue.js

解决方案

您将不得不进行某种中间转换。 v-if只是一个灵活的低级指令，它将根据条件隐藏或显示元素。它无法直接处理您期望数据的输出方式。

如果我理解您的要求，您希望一个图标在列表中只显示一次。您可以预过滤并使用额外的“其他”条件。这听起来像是计算属性的用例。您定义一个函数，可以在需要时提供转换后的数据版本。

可以通过找到一种方法来简化嵌套if/else的 s 来改进此示例，但我认为这现在涵盖了您的用例：

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          hasUnreadComments: true
        },
        {
          hasUnreadComments: true
        },
        {
          hasUnreadComments: false
        },
        {
          hasUnreadComments: true
        },
        {
          hasUnreadComments: false
        },
      ]
    }
  },
  computed: {
    filteredItems() {
      let firstIconSeen = false;
      let secondIconSeen = false;
      return this.items.map(item => {
        if (item.hasUnreadComments) {
          if (!firstIconSeen) {
            item.firstA = true;
            firstIconSeen = true;
          }
        } else {
          if (!secondIconSeen) {
            item.firstB = true;
            secondIconSeen = true;
          }
          secondIconSeen = true;
        }
        return item;
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(item, itemIndex) in filteredItems">
    <div v-if="item.firstA">
      <span>Display Icon AAA</span>
    </div>
    <div v-else-if="item.firstB">
      <span>Display Icon BBB</span>
    </div>
    <div v-else>
      <span>Display no icon</span>
    </div>
  </div>
</div>

推荐阅读