Vue中实现填写一个输入框时禁用另一个输入框的方法

嘿，这个需求在Vue里实现起来比jQuery更顺手，毕竟Vue是数据驱动的，不用手动去操作DOM元素~ 我给你写个完整的示例，一看就懂：

核心思路 #

利用Vue的响应式特性，通过v-model绑定输入框内容，直接在disabled属性里判断另一个输入框是否有内容——有内容就禁用当前输入框，没内容就恢复可用，全程不用碰DOM操作。

完整代码示例 #

模板部分 #

<template>
  <div class="input-group">
    <input 
      type="text" 
      v-model="input1Value" 
      :disabled="input2Value.length > 0" 
      placeholder="输入框1"
    />
    <input 
      type="text" 
      v-model="input2Value" 
      :disabled="input1Value.length > 0" 
      placeholder="输入框2"
    />
  </div>
</template>

脚本部分 #

<script>
export default {
  data() {
    return {
      input1Value: '',
      input2Value: ''
    }
  }
}
</script>

效果说明 #

• 初始状态下两个输入框都能正常输入；
• 只要输入框1里有内容，输入框2会立刻变成禁用状态；
• 删掉输入框1的所有内容后，输入框2会自动恢复可用；
• 反过来操作输入框2，输入框1的状态也会同步变化。

和jQuery写法的区别 #

你之前用jQuery是监听keyup事件，然后手动定位另一个输入框设置disabled属性。而Vue里我们只需要关注数据的变化，DOM状态会自动跟着数据更新，完全不用手动操作DOM元素，这就是Vue数据驱动的优势~

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