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

Question

<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遵循该行为。如果我不希望元素之间有空格，那么显而易见的方法是在其中不留空格，如代码示例所示。但这很丑陋，我不想要那样。否则如何做才能使元素之间没有空间？

Answer 1

您可以更改compiler options。

  

compilerOptions   类型：对象

     

默认值：{}

     

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

但是，文档指出这仅适用于单个文件组件和模板标记。我认为当前没有任何本机标记选项，并且相关的issue已关闭。但这也许会给您想要的结果。