如何在 Vue 3 中动态禁用下拉选项（基于数据条件）-html教程-PHP中文网

如何在 Vue 3 中动态禁用下拉选项（基于数据条件）

本文详解如何在 Vue 3 的组件中，根据 vegan 字段值动态禁用非纯素食材选项，同时保持其可见性，并支持切换“仅显示纯素”模式。

本文详解如何在 vue 3 的 `

在 Vue 应用中，常需对表单控件进行细粒度控制——例如，让某些

正确做法是：在 v-for 渲染的

以下是一个完整、可运行的 Vue 3 Composition API 示例：

Vue-router参考手册

Vue-router参考手册下载

下载

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><div id="demo">
  <select class="form-control"><option v-for="ing in ingredients" :key="ing.ID" :value="ing.ID" :disabled="!ing.vegan && onlyVegan">
      {{ ing.DESC }} {{ !ing.vegan ? '(非纯素)' : '(纯素)' }}
    </option></select><button>切换：仅显示纯素食材</button>
</div>

<script>
const { ref, computed } = Vue;
const app = Vue.createApp({
  setup() {
    const ingredients = ref([
      { ID: 1, DESC: '巧克力', vegan: false },
      { ID: 2, DESC: '葵花籽', vegan: true },
      { ID: 3, DESC: '鸡蛋', vegan: false },
      { ID: 4, DESC: '腰果奶', vegan: true }
    ]);

    const onlyVegan = ref(false);

    const toggleVeganMode = () => {
      onlyVegan.value = !onlyVegan.value;
    };

    return {
      ingredients,
      onlyVegan,
      toggleVeganMode
    };
  }
});
app.mount('#demo');
</script>

✅ 关键要点说明：

:disabled="!ing.vegan && onlyVegan"：仅当 onlyVegan 为 true 且当前食材 vegan === false 时，该选项才被禁用；否则（如 onlyVegan === false 或 ing.vegan === true）均可正常选择。
必须添加 :key="ing.ID" —— 这是 v-for 的最佳实践，确保列表更新时 DOM 高效复用，避免状态错乱。
注意字段命名一致性：示例中使用 vegan: true/false（布尔值），比原始问题中的 'Y'/'N' 字符串更符合 Vue 推荐（若后端返回字符串，建议在 computed 或 onMounted 中预处理：vegan: item.Vegan === 'Y'）。
若需彻底隐藏非纯素项（而非禁用），才应改用 v-if="onlyVegan ? ing.vegan : true" 包裹

? 进阶提示： 可结合 CSS 增强用户体验，例如为禁用项添加灰色文字与斜体样式：

option:disabled {
  color: #999;
  font-style: italic;
  background-color: #f5f5f5;
}

通过合理运用 :disabled 响应式绑定，你既能满足业务中“历史兼容可见性”的需求，又能精准控制用户交互权限，实现专业级表单体验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！