css - 在 :class ="{{}} {{}}" in Vue 上添加两个计算类属性

Question

我是 Vue 世界的新手，很好奇我是否能够将 2 个计算属性应用于 :class。我试过给每个 Prop :class="{{prop1}} {{prop2}}"但在重新加载时，内容将全部消失，因为似乎出了点问题。

有人知道这是否可行，或者以这种方式做事是否有好处？

背景故事

我正在创建一个将具有 :class="{{showWhenButtonClicked}}" 的输入和另一个在电子邮件无效时为其提供绿色输入或红色输入类名的输入。

如果有任何我遗漏的细节或更好的方法，请告诉我。谢谢!!

computed: {
  validateEmail() {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(this.emailTo).toLowerCase())
  },
  showEmailInput() {
    return this.sendEmail ? 'hide-show-option' : 'hide-option-input'
  },
  displayEmailError() {
    return this.validateEmail() ? "valid-input" : "not-valid-input"
  }
},

<input :class="{{showEmailInput}} {{displayEmailError}}" placeholder="Enter Email..." v-model="emailTo" @blur="{{validateEmail}}" type="email">

Answer 1

你会使用 array syntax应用类列表:

<input :class="[showEmailInput, displayEmailError]"/>