Javascript 为什么在使用Vue/Nuxt时，我会遇到星星间距问题？

我正在用Nuxt.js建立一个明星评级系统，使用fontawesome图标。出于某种原因，每当两个不同的明星相邻放置时，就会有一个奇怪的空格将两者分隔开来。例如，下面是一个全明星评级：

这里有一颗空星：

您可以看到emtpy星形由一些左侧空格分隔。这似乎只有在vue循环中使用它们时才会发生，所以我确信这与vue的虚拟DOM有关，但我不确定它可能是什么。我的组件如下所示：

<template>
<span class="stars">
    <span v-for="i in stars.full" class="fas fa-star" aria-hidden="true"></span>
    <span v-for="i in stars.half" class="fas fa-star-half-alt" aria-hidden="true"></span>
    <span v-for="i in stars.empty" class="far fa-star" aria-hidden="true"></span>
</span>

---

full、half和empty只是一个整数。

如果查看源代码，您可能会看到：

<span class="stars">
  <span class="fas fa-star" aria-hidden="true"></span><span class="fas fa-star" aria-hidden="true"></span><span class="fas fa-star" aria-hidden="true"></span><span class="fas fa-star" aria-hidden="true"></span>
  <span class="far fa-star" aria-hidden="true"></span>
</span>

空的星号换成了新行，这就是造成空白的原因。您希望所有

元素位于同一行，以防止它们之间出现空白，因此请尝试此方法

<span class="stars">
  <span v-for="i in stars.full" class="fas fa-star" aria-hidden="true"></span><span v-for="i in stars.half" class="fas fa-star-half-alt" aria-hidden="true"></span><span v-for="i in stars.empty" class="far fa-star" aria-hidden="true"></span>
</span>

很难看，但很管用