如何将类属性绑定到 Vue 2.0 中的表达式？答案

【问题标题】：How can I bind a class attribute to an expression in Vue 2.0?如何将类属性绑定到 Vue 2.0 中的表达式？
【发布时间】：2016-10-07 19:12:29
【问题描述】：

我在 Vue 1.0 中有这个：

<div v-for="menuItem in menu" class='vnav-item-wrapper'>
  <i v-show="menuItem.icon" class="vnav-icon fa fa-{{menuItem.icon}}"></i>
</div>

但现在 {{}} 构造在 Vue 2.0 中已过时。

我刚刚通读了Class and Style guide，我似乎无法将一个类绑定到"fa-" + menuItem.icon。我无法绑定到表达式。

我得到的最接近的是计算数据属性，但话说回来，我在 v-for 中间，我无法创建“计算变量”。

我该如何解决？

【问题讨论】：

【解决方案1】：

我认为this other question 向您展示了如何。对我来说，一旦你将v-bind:（或: 简写）应用于一个属性，它就被解释为好像它是JavaScript 一样，这对我来说绝对不是显而易见的。所以我认为你想要的是：

<div v-for="menuItem in menu" class='vnav-item-wrapper'>
  <i v-show="menuItem.icon" :class="'vnav-icon fa fa-' + menuItem.icon"></i>
</div>

【讨论】：