使用 v-bind 将视图数据后缀添加到 class

Question

我在 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- class 后缀 props.option.code 但 Vue 不允许我再以这种方式添加到 class 。它要求我用 v-bind 来做，但是我试图让它与 v-bind 一起工作，但我做不到。

有没有办法让 v-bind 工作？

Answer 1

试试这个

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

使用 v-bind 将视图数据后缀添加到 class

Suffix vue data to class with v-bind

vue.js

vue-component

vuejs2