在 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 而导致的潜在问题。
