Vue条件显示实现：cropid=6时如何隐藏指定列表跳转链接

你可以通过以下两种方案实现需求，前提是你的组件内已经可以正确访问到cropID变量（props/路由参数/接口返回值都可）：

方案1：使用计算属性过滤列表（更推荐） #

该方案将过滤逻辑放在JS层，模板更简洁，后续拓展性更强。

1. 新增计算属性过滤diseases数组：

computed: {
  filteredDiseases() {
    // cropID为6时过滤掉病害检索表对应的项
    if (this.cropID === 6) {
      return this.diseases.filter(item => item.id !== 'k')
    }
    // 其他情况返回完整列表
    return this.diseases
  }
}

2. 修改模板的遍历对象，把原来的diseases替换为filteredDiseases：

<v-card
  v-for="(disease,index) in filteredDiseases"
  :key="index"
  ripple
  class="hand"
  @click="navigateTo(disease.id)"
>

方案2：模板直接加v-if判断 #

该方案无需修改JS代码，直接在模板层做条件渲染：

<v-card
  v-for="(disease,index) in diseases"
  :key="index"
  v-if="!(cropID === 6 && disease.id === 'k')"
  ripple
  class="hand"
  @click="navigateTo(disease.id)"
>

注意事项 #

• 如果你的cropID是字符串类型，需要把判断条件中的6改为'6'，避免因类型不匹配导致判断不生效。

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