vue.js - 防止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 type: Object

default: {}

Options for the template compiler. When using the default vue-template-compiler, you can use this option to add custom compiler directives, modules, or discard whitespaces between template tags with { preserveWhitespace: false }.

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