Vue.js如何根据下拉框选中项控制后续输入框的显示与隐藏

问题原因 #

• 下拉选项的value属性值是小写的cheque，但v-if判断条件里写的是首字母大写的Cheque，字符串全等判断（===）对大小写敏感，所以永远匹配失败，输入框不会显示。
• 额外优化点：input标签不存在integer这个合法type属性值，数字输入场景使用number类型更符合规范。

修复后可直接运行的代码 #

<select v-model="receive_method" id="">
  <option value="cheque">Cheque</option>
  <option value="eftn">EFTN</option>
  <option value="cash">CASH</option>
</select>
<!-- 判断值改为和option的value完全一致的小写cheque即可 -->
<div v-if="receive_method === 'cheque'">
  <input type="number" v-model="cheque_number" placeholder="Cheque Number">
</div>

额外注意事项 #

• 需确保Vue实例的data选项中已经声明对应响应式变量，示例配置如下：

data() {
  return {
    receive_method: '', // 初始值为空时默认不显示输入框，可根据需求调整默认值
    cheque_number: ''
  }
}

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