使用 v-bind 为 vue 数据添加后缀答案

【问题标题】：Suffix vue data to class with v-bind使用 v-bind 为 vue 数据添加后缀
【发布时间】：2017-05-31 02:52:24
【问题描述】：

我在 Vue Multiselect 组件中有以下模板。

<template slot="option" scope="props">
  <div class="option__desc">
    <span class="flag-icon flag-icon-{{ props.option.code }}">{{ props.option.code }}</span>
    <span class="option__small">{{ props.option.name }}</span>
  </div>
</template>

我需要在 flag-icon- 类后面加上 props.option.code 后缀，但 Vue 不允许我再以这种方式添加到类中。它需要我使用 v-bind 来完成，但我试图让它与 v-bind 一起工作，但我不能。

有没有办法使用v-bind 进行这项工作？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

试试这个

<span :class="'flag-icon flag-icon-' + props.option.code">

【讨论】：

谢谢 :)