Vue.js 基于文本输入禁用按钮

我有两个字段，电子邮件和密码以及一个按钮：

该按钮已根据密码.长度禁用，但我也希望根据有效的电子邮件地址禁用

我试着做：

模板：

<v-btn
 class="btn white--text"
 :disabled="password.length <= 6 && isValidEmail"
 @click="onSignIn"
 >Sign In</v-btn>

但它不起作用，只有password.length起作用。

---

我缺少什么？

您可以添加另一个计算属性并使用它。只有简单表达式才能在v-bind中工作

您可以添加另一个计算属性并使用它。v-bind中只有简单的表达式可以工作

我认为您应该使用OR而不是&&运算符，因此每当其中一个条件返回false时，它就会被禁用
I think you should use OR instead of && operator, so whenever one of the condition return false, its disabled

  <v-btn
  class="btn white--text"
  :disabled="password.length <= 6 || !isValidEmail"
  @click="onSignIn"
  >Sign In</v-btn>

登录

我认为您应该使用OR而不是&&operator，因此只要其中一个条件返回false，它就被禁用
登录

您可以使用直接绑定数据：

---

：disabled=“password.length您可以使用直接绑定数据： ：disabled=“password.length找到了如何执行此操作，正如所说，您需要v-bind中的简单表达式（无

&&&&|

）：

找到了如何实现这一点，比如说您需要v-bind中的简单表达式（no

&&&&&124;

）：

---

不起作用。isValidEmail是一个返回true或false的函数，因此不需要感叹号。不起作用。isValidEmail是一个返回true或false的函数，因此不需要感叹号。对不起，我不明白如何执行您的建议。使用另一个计算属性会有什么不同？我认为and表达式在v-bind中可能不起作用，如果是这种情况，那么使用另一个计算属性将解决这个问题谢谢它的帮助。抱歉，我不明白如何执行您的建议。使用另一个计算属性会有什么不同？我认为and表达式在v-bind中可能不起作用，如果是这样，那么使用另一个计算属性将解决这个问题，感谢它的帮助。

I think you should use OR instead of && operator, so whenever one of the condition return false, its disabled

  <v-btn
  class="btn white--text"
  :disabled="password.length <= 6 || !isValidEmail"
  @click="onSignIn"
  >Sign In</v-btn>

  computed: {
    isValidForm() {
      return (this.password.length > 6 && validateEmail(this.email));
    },
  }