如何在Vue的v-for循环中排除type为hidden的项？

你可以通过两种方式实现排除type为"hidden"的项：

方式一：直接在v-for中使用filter过滤 #

直接在循环数据源处调用数组的filter方法，过滤掉不符合条件的项：

<span v-for="(customField, index) in item.customFields.filter(field => field.type !== 'hidden')" :key="index">
  {{ customField.value }}
</span>

这种方式适合简单场景，写法简洁直接。

方式二：使用计算属性（推荐复杂场景） #

如果过滤逻辑需要复用，或者item.customFields数据量较大，建议用计算属性封装过滤逻辑，可读性和性能更优：

<template>
  <span v-for="(customField, index) in visibleCustomFields" :key="index">
    {{ customField.value }}
  </span>
</template>

<script>
export default {
  computed: {
    visibleCustomFields() {
      return this.item.customFields.filter(field => field.type !== 'hidden')
    }
  }
}
</script>

计算属性会缓存过滤结果，只有当item.customFields变化时才会重新计算，避免重复执行过滤操作。

额外提示：如果customField有唯一标识（比如id），建议把:key绑定到这个唯一标识上，而不是index，这样Vue的虚拟DOM diff会更高效。

内容的提问来源于stack exchange，提问作者jmozzart