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

【问题标题】：How to include value from JSON data in BEM class modifier in Vue.js 2.0?如何在 Vue.js 2.0 的 BEM 类修饰符中包含来自 JSON 数据的值？
【发布时间】：2018-12-05 19:03:40
【问题描述】：

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

这是我尝试过的：

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

但它最终看起来像：

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

【问题讨论】：

你试过'title--'+item.title: true吗？
@BoussadjraBrahim 是的，我做到了。我收到错误“- 无效表达式：意外的令牌 + in”

标签： javascript json vue.js vuejs2 bem

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

注意你也可以使用绑定简写：

<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}`
  }
}

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

【讨论】：