在 Vue 中的 :class="{{}} {{}}" 上添加两个计算类属性

Question

我对 Vue 世界还很陌生，我很好奇我是否能够将 2 个计算属性应用于 :class。 我试过给每个道具一个空间: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

试试这个

:class="prop1 + ' ' + prop2"

Answer 2

您可以使用array syntax 来应用类列表：

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

Answer 3

尼克的答案是迄今为止最好的答案。但是您也可以将类存储在计算变量中，我认为这可以清理代码：

  classList({ sendEmail, validateEmail }) {
    return [
      sendEmail ? 'hide-show-option' : 'hide-option-input',
      validateEmail ? "valid-input" : "not-valid-input"
    ]
  }

或者你可以返回一个对象，但在这种情况下它不像数组那么简洁

  classObject({ sendEmail, validateEmail }) {
    return {
      'hide-show-option': sendEmail, 
      'hide-option-input': !sendEmail,
      'valid-input': validateEmail,
      'not-valid-input': !validateEmail
    }
  }

当你开始在类中集成更复杂的逻辑时，上面的两个选项会更有意义。