Почему Vue не рендерит это пространство?Жук? - PullRequest
0 голосов
/ 20 декабря 2018

У меня есть два свойства 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>

Приведенный выше код производит выводниже.Почему между Тимом и Смитом в первых двух строках нет пробела?

enter image description here

1 Ответ

0 голосов
/ 20 декабря 2018

Вы должны использовать символ &nbsp; в качестве пробела.

Также как один из способов получить тот же результат

{{(firstName + ' ' + lastName).trim()}}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...