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

Question

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

有谁知道这是否可行，或者这样做是否有好处？

背景故事

我正在创建一个包含 :class="{{showWhenButtonClicked}}" 的输入，另一个在电子邮件无效时为其提供绿色输入或红色输入 class 名称。

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

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

Nick 的回答是迄今为止最好的回答。但是您也可以将 class 存储在一个计算变量中，我认为这可以清理代码：

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

或者您可以 return 对象代替，但在这种情况下它不像数组那样简洁

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

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

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

Adding two computed class properties on a :class="{{}} {{}}" in Vue

css

vue.js

computed-properties

vuejs2