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

Question

我是Vue世界的新手，如果我能够将2个计算的属性应用于A：类，我很好奇。我尝试给每个Prop :class="{{prop1}} {{prop2}}"的空间但是在重新加载时，内容都将消失，因为似乎有些错误。

有人知道这是否可能，还是这样做是否有好处？

Backstory

IM创建一个输入，该输入将具有: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

您将使用数组语法应用类别的列表：

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

Answer 2

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

  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
    }
  }

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

Answer 3

尝试此

:class="prop1 + ' ' + prop2"