vue.js - Vue v-for 和 v-if

Question

我在 Vue 文档中发现了一些不一致之处。如果有人澄清这一点，请。看着v-for-with-v-if它说这样做可能会有用。就我而言，我正处于那种情况。但是现在 eslint 正在提示。

所以我查看了 style guide它告诉我要避免这种情况。所以有一些明显的矛盾。

问题:你应该避免它真的那么糟糕吗？

我的意见:我不认为它不好。我有很多用例，这很有用。

Answer 1

方式一:

所有节点都将在每个项目[]更改时呈现

<span v-for="item in items" v-if="item.shouldRender">...</span>

---

方式二:

所有节点都会渲染一次

<template v-for="item in items">
    <span v-if="item.shouldRender">...</span>
</template>

---

方式三:

只会渲染过滤后的节点。过滤后的列表被缓存。

<span v-for="item in computedShouldRenderItems">...</span>

---

我认为“方式 1”并不是真的很糟糕。但我宁愿避免它。