У меня есть два свойства vue firstName
и lastName
.Допустим, ценность этих свойств - Тим и Смит.Когда я отображаю их как полное имя, я отображаю эти свойства и вставляю пробел между ними, если они оба содержат значения.Однако Vue пропускает пробел в выводе и отображает TimSmith.Но если я перехожу на код для вывода запятой, если оба свойства имеют значения, то правильно выводятся Тим, Смит.По ощущениям как ошибка.Может ли кто-нибудь объяснить, как достичь моей цели с помощью 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>
Приведенный выше код производит выводниже.Почему между Тимом и Смитом в первых двух строках нет пробела?