在 vue js 组件的 class 中插入字符串

Question

你好，我有一个 vue 组件，我在其中循环显示国家列表：

<div v-for="i in pays" :key="i.id">
  {{i.name}}
  <span class="flag-icon-gr"></span>

我想用我从循环中收到的相应标签更改标志图标的结尾。例如，如果国家是法国，我希望有 flag-icon-fr。有正确的方法吗？

ps: 我使用的是 nuxt，但我想这对于普通的 vue js 组件来说是一样的。

Answer 1

您可以使用如下方式动态绑定 class：

<span :class=:icon="'fa-flag' + i.name"></span>

Insert string in a class in a vue js component