[vue/no-use-v-if-with-v-for] v-for 和 v-if 在同一个元素中的处理方法

在 Vue.js 中，使用 v-for 和 v-if 在同一个元素上是反模式（antipattern），因为这会导致额外的 DOM 元素渲染和更新，从而影响性能。Vue 建议将数据过滤逻辑放在组件内部处理，而不是在模板中处理。因此，当需要根据某些条件过滤列表项时，最佳的做法是使用计算属性（computed properties）来返回一个过滤后的数组，然后仅使用 v-for 来遍历这个新的数组。

下面是一个示例，展示如何将 v-if 和 v-for 分离，并使用计算属性来实现：

// Vue 组件定义
export default {
  data() {
    return {
      agents: [
        { name: "Agent A", active: true },
        { name: "Agent B", active: false },
        { name: "Agent C", active: true }
      ]
    };
  },
  computed: {
    // 使用计算属性来返回过滤后的数组
    activeAgents() {
      return this.agents.filter(agent => agent.active);
    }
  }
}

然后，在模板中，你可以这样使用：

<template>
  <div>
    <ul>
      <!-- 只使用 v-for 遍历计算属性返回的数组 -->
      <li v-for="agent in activeAgents" :key="agent.name">
        {{ agent.name }}
      </li>
    </ul>
  </div>
</template>

在这个例子中，activeAgents 是一个计算属性，它返回 agents 数组中所有 active 属性为 true 的元素。这样，在模板中就只需要用 v-for 来遍历 activeAgents，而不需要再使用 v-if 来过滤数组中的元素。

这样做不仅提高了性能，还让模板更加清晰易读。此外，这也符合 ESLint 插件 eslint-plugin-vue 的规则 vue/no-use-v-if-with-v-for，避免了在同一元素上同时使用 v-if 和 v-for 而导致的潜在问题。

原文地址：https://blog.csdn.net/weixin_43094085/article/details/142788212

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！