Vue.js内联元素用v-for时空格被修剪，如何解决该问题？

我之前也碰到过这个棘手的小问题——用v-for循环渲染<a>这类inline元素时，Vue会把元素之间的空格给“吃掉”，导致所有链接挤成一团，和原生HTML渲染的效果差很多。下面给你几个实用的解决办法：

方法一：用<text>节点插入普通空格 #

Vue会保留<text>标签里的空白内容，你可以把循环内容包裹在<template>里，给每个链接后面加一个带空格的<text>节点：

<div id="app">
  Vue Rendering<br>
  <template v-for="fruit in fruits">
    <a v-bind:href="fruit.url" v-html="fruit.label"></a>
    <text> </text>
  </template>
</div>

这样每个链接后面都会被插入一个普通空格，渲染效果和原生HTML完全一致。

方法二：用CSS控制元素间距 #

如果不想修改模板结构，直接给容器添加CSS的word-spacing属性就能模拟空格效果：

#app {
  word-spacing: 0.4em; /* 可以根据需求调整间距大小 */
}

这种方式更简洁，不需要改动模板代码，适合只需要视觉上分开元素的场景。

方法三：插入 不换行空格 #

直接在每个链接后面添加 ，也能快速让元素分开：

<div id="app">
  Vue Rendering<br>
  <a v-for="fruit in fruits" v-bind:href="fruit.url" v-html="fruit.label"></a>&nbsp;
</div>

不过要注意， 是不换行的空格，和普通空格的行为略有不同——如果你的链接可能需要换行展示，这个方法可能不太合适。

为什么会出现这个问题？ #

Vue在编译模板时，会自动压缩多余的空白字符（包括元素之间的换行、空格）；而原生HTML里的元素空格会被浏览器保留为一个空格。用v-for渲染的元素，它们之间的空白会被Vue的模板编译过程移除，所以就出现了链接挤在一起的情况。

内容的提问来源于stack exchange，提问作者G2N