如果输入字段大于另一个字段，则禁用按钮答案

【问题标题】：Disable a button if an input field is bigger than another one如果输入字段大于另一个字段，则禁用按钮
【发布时间】：2020-11-04 14:11:12
【问题描述】：

我正在尝试检查输入 A 是否大于输入 B，如果发生这种情况，请禁用按钮以及是否未启用

HTML：

<input  v-model="form.a" />
<input  v-model="form.b" />
<button :class="{disabled: btnDisabled}">Enviar</button>

VueJs：

<script>
import { required, minLength } from 'vuelidate/lib/validators';

export default {
    created() {
        
    },
    data: function() {
        return {
            btnDisabled: false,
            form: {
                a: '',
                b: ''
            }
        }
    },
    methods: {
        checkEndBillNumber() {
            if(this.form.a > this.form.b) {
                // I do not know what I should put here
            }
            else {
               // I do not know what I should put here
            }
        }
    }
}
</script>

如果你看到我不知道我应该做什么，并且在 vuejs 条件下禁用按钮，如果条件为真或假。

我该怎么做？谢谢！

【问题讨论】：

标签： vue.js vuejs2 vuejs3

【解决方案1】：

按钮中的disabled 属性获得true 或false，因此您可以执行以下操作：

<input v-model="form.a" />
<input v-model="form.b" />

<button :disabled="isDisabled">Enviar</button>

computed: {

 isDisabled() {
  const result = this.form.a > this.form.b ? true : false;
  return result;
 }

}

或者如果你想添加一个类，你可以这样做：

<button :class="{ 'yourClassName': isDisabled }">Enviar</button>

【讨论】：