我可以在 Vuejs 中传递计算的属性和 v-bind:class 内的对象吗？

Question

我想知道我是否可以做这样的事情，因为我正在尝试但只会出现错误...请原谅我的英语不好。

HTML 文件类似于

<p :class="{mycss: isActive}, myComputedProperty" > My text </p>

组件文件应该有类似

的内容

export default {
  data () {
    return {
      isActive: true
    }
  },
  computed: {
    myComputedProperty () {
      // do something
    }
  }
}

Answer 1

我认为错误出在您的 HTML - 逗号可能是原因。格式化字符串的方法有很多种，但这是一种选择：

<p :class="isActive ? 'mycss ' + myComputedProperty : myComputedProperty" > My text </p>

Answer 2

class 值是一个表达式。如果它在 raw JavaScript 中没有意义，那么在那里也没有意义。这里使用了逗号运算符，所以表达式的计算结果为 myComputedProperty，{mycss: isActive} 部分被丢弃。

组合 class 值的格式为 documented:

:class="[{mycss: isActive}, myComputedProperty]"

由于涉及到计算值，将整个 class 对象定义为计算值将使模板代码更清晰。

Can I pass a computed property and an object inside a v-bind:class in Vuejs?