在 Vue 中添加空格答案

【问题标题】：Add whitespace in Vue在 Vue 中添加空格
【发布时间】：2020-12-20 15:39:07
【问题描述】：

我有 Vue 项目我需要在不同 HTML 标签中的两部分单词之间插入一个空格。我如何在 Vue 中做到这一点？我尝试了几种方法，但 Vue 总是删除它

<div v-if="film_data.actors" class="film-info__actors">
  actors:    //after ':' I need a whitespace
  <div class="actors">
    {{film_data.actors.join(', ')}}
  </div>
</div>

scss:

.film-info {
  @include h4Text;
  color: $color-dark-gray;

  &__actors {
    text-transform: uppercase;
    display: flex;
    align-items: flex-start;
  }
}

.actors {
  @include bodyText;
  color: $color-light-gray;
  text-transform: none;
}

【问题讨论】：

stackoverflow.com/a/1357163/2185093
html 不允许堆叠常规空间；它是 HTML 的特性，而不是 vue。您需要在相关 html 元素的开始/结束部分或特殊中断处使用边距/填充（尽管如果可能，样式应该优先于特殊中断）。

标签： vue.js whitespace

【解决方案1】：

Vue 不应该删除空格。您要插入空格的部分只是纯 HTML。也许您可以添加一些正确的填充？

<div v-if="film_data.actors" class="film-info__actors">
  <span style='padding-right: 50px'>actors:</span>
  <div class="actors">
    {{film_data.actors.join(', ')}}
  </div>
</div>

另一个解决方案是特点。但如果只是为了创建间距，这通常不是一个好主意。

【讨论】：