Question

我正在尝试编写一个显示图标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模型。

在Vue中可以将第三个数据变量用作标志吗？

Answer 1

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

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

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

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>

根据属性有条件地仅渲染图标一次

1 个答案: