为什么 Vue 不渲染这个空间？一个错误？答案

【问题标题】：Why isn't Vue rendering this space? A bug?为什么 Vue 不渲染这个空间？一个错误？
【发布时间】：2018-12-20 15:37:56
【问题描述】：

我有两个 vue 属性 firstName 和 lastName。假设这些属性的值是 Tim 和 Smith。当我将它们显示为完整名称时，我会显示这些属性并在它们之间包含一个空格（如果它们都包含值）。但是，Vue 会省略输出中的空格并显示 TimSmith。但是，如果我更改代码以输出逗号空格，如果两个属性都有值，那么它会正确输出 Tim，Smith。感觉是个bug。谁能解释如何使用 Vue 实现我的目标，即如果两个属性都包含值，则它们之间只包含一个空格，并解释为什么我看到我是什么？

    <html>
    <head>
    </head>
    <body>
        <div id="appTemplate">
            {{firstName}}<template v-if="firstName!='' && lastName!=''"> </template>{{lastName}}<br />
            {{firstName}}<span v-if="firstName!='' && lastName!=''"> </span>{{lastName}}<br />
            {{firstName}}<template v-if="firstName!='' && lastName!=''">, </template>{{lastName}}<br />
            {{firstName}} {{lastName}}<br />
        </div>

        <script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#appTemplate',
                data: {
                    firstName: "Tim",
                    lastName: "Smith"
                }
            });
        </script>

    </body>
    </html>

上面的代码产生下面的输出。为什么前两行 Tim 和 Smith 之间没有空格？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您应该使用&nbsp; 符号作为空格。

也是获得相同结果的一种方法

{{(firstName + ' ' + lastName).trim()}}

【讨论】：

不幸的是，它与空格并不完全相同，因为如果它的空间受到限制，它将不允许名称换行。关于您的第二个建议，只有当 firstName 和 lastName 都不为空时，我才需要包含空格。我提供的代码是否向您说明了 Vue 错误？
@RonC 所以第二种方式对你有好处。阅读developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
>我提供的代码是否向您说明了一个 Vue 错误？没有。这是浏览器的默认行为。
感谢您的帮助。你的第二种方法确实有效。哇，你是对的Tim<span> </span>Smith<br />（span 标签之间的空格），即使我直接将它输入到 HTML 中，输出时也会省略空格并将 TimSmith 输出到浏览器。至少可以说我很惊讶。我知道多个空格被折叠成一个空格，但是为什么跨度中的单个空格被一起省略了？你能解释一下为什么会出现这种行为或给我一个参考吗？
这有帮助。即使在 20 多年的 html 编码之后，也始终在学习有关 html 的新事物。