如何在 Vue.js 2.0 的 BEM class 修饰符中包含来自 JSON 数据的值？

Question

我想在磁贴上的 class 名称中包含 title 的值，以遵循我正在使用的 BEM 命名约定。如何做到这一点？

这是我尝试过的方法：

<h2 :class="{
  'title': true,
  'title--${item.title}': true
}">{{ item.title }}</h2>

但它最终看起来像：

<h2 class="title title--${item.title}">Title</h2>

Answer 1

您基本上需要嵌套字符串和绑定，或者只在您的组件中使用一个变量。

如果你想做嵌套的字符串，你可以这样做：

<h2 v-bind:class="title + ' title--' + item.title">Title</h2>

注意你也可以使用绑定shorthand:

<h2 :class="title +' title--' + item.title">Title</h2>

如果你想计算整个 shebang，你可以把它变成一个你稍后定义的函数：

<h2 :class="getClass(title, item)">Title</h2>

然后在您的组件定义中：

methods: {
  getClass (title, item) {
    return `${title} title--${item.title}`
  }
}

请注意，在重读您的问题后，我正在做一个假设。我假设你有两个道具，title 和 item，并且 title 和 item.title 是不同的。如果我弄错了，请随时调整。

Answer 2

我认为 Paul 的回答几乎可以满足您的需求。我只想补充一点，如果您想使用 Vue 的 class 绑定有条件地应用 class，那么您可以使用 ES6's computed property names ..

<h2 :class="{
  'title': true,
  [`title--${item.title}`]: true
}">{{ item.title }}</h2>

How to include value from JSON data in BEM class modifier in Vue.js 2.0?