Vue.js新手求助：如何通过下拉框控制div元素的显示与隐藏？

你的代码核心问题在于下拉框的事件处理逻辑错误，同时可以用Vue更简洁的特性实现需求，以下是具体修正方案：

问题分析 #

• 你在@change事件中传入了true，但genderSelected函数试图访问pick.value——布尔值true并没有value属性，导致逻辑完全无法执行。
• Vue提供的v-model可以直接绑定下拉框的选中值到响应式变量，无需手动编写事件处理函数，代码更简洁可靠。

修正后的完整代码 #

模板部分 #

<template>
  <select
    class="form-select"
    aria-label="Default select example"
    name="filter"
    v-model="gender"
  >
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>

  <!-- 控制显示的区域 -->
  <div v-if="gender === 'Male'">Male</div>
  <div v-if="gender === 'Female'">Female</div>
</template>

脚本部分 #

<script>
import { ref } from "vue";

export default {
  setup() {
    const gender = ref("Male");
    // 无需额外的genderSelected函数，v-model会自动同步选中值到gender

    return {
      gender,
    };
  },
};
</script>

若坚持手动处理change事件（不推荐） #

如果一定要保留事件处理的写法，需修正传参和函数逻辑：

<!-- 模板中传入选中的目标值 -->
<select
  class="form-select"
  aria-label="Default select example"
  name="filter"
  @change="genderSelected($event.target.value)"
>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select>

// 脚本中修改函数逻辑
const genderSelected = (pick) => {
  gender.value = pick; // 直接赋值选中值，无需多余判断
};

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