在Vue JS组件的类中插入字符串

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

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

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