防止元素之间的Vue渲染换行符答案

【问题标题】：Prevent vue render newline between elements防止元素之间的Vue渲染换行符
【发布时间】：2019-03-25 09:15:02
【问题描述】：

<template>
  <div>
    <span>foo</span> <!-- unwanted space here -->
    <span>bar</span>
    <span>foo</span>
  </div>
</template>

// But I don't want to do this
<template>
  <div>
    <span>
      foo
    </span><span> <!-- bad coding style -->
      bar
    </span><span>
      baz
    </span>
   </div>
</template>

在 html 中，元素之间的换行符呈现为空格，而 Vue 遵循这种行为。如果我不希望元素之间有空格，显而易见的方法是在其中不放置空格，如代码示例所示。但它很丑，我不想那样。我该怎么做才能使元素之间没有空间？

【问题讨论】：

您指的是 HTML 格式（例如，在 IDE 中）吗？还是构建输出中呈现的代码？

标签： vue.js

【解决方案1】：

您可以更改compiler options。

编译器选项类型：对象

默认值：{}

模板编译器的选项。使用默认的 vue-template-compiler 时，您可以使用此选项添加自定义编译器指令、模块或使用 { preserveWhitespace: false } 丢弃模板标签之间的空格。

但是文档声明这仅适用于单个文件组件和模板标签。我认为目前没有任何原生标签选项，相关的issue 已关闭。但也许它会给你想要的结果。

【讨论】：