我有两个 vue 属性 firstName 和 lastName。假设这些属性的值是 Tim 和 Smith。当我将它们显示为完整名称时，我会显示这些属性，并在它们之间包含一个空格(如果它们都包含值)。但是，Vue 会忽略输出中的空格并显示 TimSmith。但是，如果我更改为输出逗号空格的代码(如果两个属性都有值)，那么它会正确输出 Tim, Smith。感觉就像一个错误。任何人都可以解释如何使用 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="493f3c2c097b677b677c" rel="noreferrer noopener nofollow">[email protected]</a>/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 之间没有空格？
最佳答案
您应该使用 符号作为空格。
也是获得相同结果的方法之一
{{(firstName + ' ' + lastName).trim()}}
关于vue.js - 为什么 Vue 不渲染这个空间？一个错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53871721/