javascript - Il n'y a pas d'espace entre les spans bouclé par vue, mais il y a un espace écrit directement entre les spans. Pourquoi?

Question

<p id="app">
    <span v-for="item in items">{{ item }}</span>
    <span>ttt</span>
    <span>sss</span>
</p>

new Vue({
    el: '#app',
    data: {
        items: ['aaa', 'bbb', 'ccc']
    },
})

L'effet d'affichage est probablement comme ceci :

aaabbbccc ttt sss

La travée en boucle à l’avant n’a pas d’espacement, mais la travée à l’arrière a un espacement, je ne sais pas pourquoi.

Answer 1

S'il y a des éléments display:inline ou display:inline-block adjacents les uns aux autres et qu'il y a un saut de ligne entre eux, un espace sera automatiquement généré.
Vous pouvez définir font-size:0; sur les éléments parents de ces éléments pour éliminer l'espace causé par les sauts de ligne.

ps : Dans ce cas, si le code ne s'enroule pas, il n'y aura pas d'espace.

Answer 2

Avez-vous forcé le retour chariot et le saut de ligne ? Dans ce cas, il y aura un écart

Answer 3

Les sauts de ligne des éléments en ligne occuperont de l'espace. La solution est de définir font-size:0; dans votre #app De cette façon, la taille du saut de ligne devient 0 et l'espacement que vous avez mentionné n'apparaîtra pas.

.