在其他条件类的顶部应用来自vue.js中的计算的动态CSS类

Question

我div在我的Field.vue组件模板中有这个 :

<div class="field"
    :class="{
      'has-bomb': field.hasBomb && field.isOpen,
      'is-open': field.isOpen,
      'is-marked': field.isMarked
    }"></div>

现在我有一个计算,基于创建一个字符串field.x和field.y这样的:

computed: {
  cssClass () {
    return `x${this.field.x}-y${this.field.y}`
  }
}

如何将生成的String作为CSS类添加到我的div中？

我试过了

<div class="field"
    :class="{
      'has-bomb': field.hasBomb && field.isOpen,
      'is-open': field.isOpen,
      'is-marked': field.isMarked,
      cssClass
    }"></div>

并且

<div class="field"
    :class="{
      'has-bomb': field.hasBomb && field.isOpen,
      'is-open': field.isOpen,
      'is-marked': field.isMarked,
      cssClass: true
    }"></div>

但那只是给了我

<div class="field cssClass"></div>

而不是我需要的,例如:

<div class="field x3-y10"></div>

Answer 1

对于这种方法,Vue提供了所谓的Array Syntax类绑定,它允许在传递给动态html属性的数组中使用静态或动态类.

例如:

<div :class="['static-class', computedClass, {'dynamic': obj.enabled}]">Test</div>

@webnoob在评论中需要:也很好知道可以同时使用纯html class和vue动态,:class即使在HTML中无效使用2个相同的属性(在规范中阅读更多),而且,现在如果你试图使用多个相同的属性,浏览器将忽略它们.但是在我们使用vue的情况下,它可以工作,因为所有动态类都将与静态类合并在一起,最后元素将只包含一个类属性.

工作范例:

<div :class="myClass" class="row">Test</div>

但是不可能使用两种相同的样式(即两个动态或两个静态)

不工作的例子:

<div class="a" class="b"></div> 或者<div :class="a" :class="b"></div>

这会产生错误.