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个相同的属性（read more in specifications），如果您尝试使用多个相同的属性，浏览器将忽略它们。但是在我们使用vue的情况下，它可以工作，因为所有动态类都将与静态类合并在一起，最后元素将只包含一个类属性。

工作示例：

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

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

不工作示例：

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

这会产生错误。

将vue.js中的计算动态CSS类应用于其他条件类

1 个答案: