クラス属性をVue 2.0の式にバインドするにはどうすればよいですか？

Question

私は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の真ん中にあります。計算された変数は作成できません。

どうすれば解決できますか？

Answer 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>