Vue v-for 与 v-if [英] Vue v-for with v-if

问题描述

我在 Vue 文档中发现了一些不一致的地方.如果有人澄清这一点，请.看着 v-for-with-v-if 它说这样做可能有用.在我的情况下，我处于那种确切的情况.但是现在 eslint 正在抱怨.

I found some inconsistency in the Vue documentation. If someone clarify this please. Looking at v-for-with-v-if it says it could be useful to do it. Which in my case I am in that exact situation. But now eslint is complaining.

所以我看了风格指南 并告诉我要避免这种情况.所以有一些明显的矛盾.

So I looked at the style guide and its telling me to avoid this. So there is some clear contradiction.

问题:真的有那么糟糕，你应该避免吗?

Question: Is it really that bad that you should avoid it?

我的意见:我不认为它是坏.我有很多使用案例，这很有用.

My Opinion: I don't see it as bad. I have quite a few use cases where this is useful.

推荐答案

方式一:

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

all nodes will be rendered on every items[] change

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

<小时>

方式 2:

---

Way 2:

所有节点都会渲染一次

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

<小时>

方式 3:

---

Way 3:

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

only filtered nodes will be rendered. Filtered list is cached.

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

<小时>

我认为 'way-1' 并不是很糟糕.但我宁愿避免它.

---

I think that 'way-1' is not REALLY bad. But I prefer to avoid it.

这篇关于Vue v-for 与 v-if的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！