如何在v-for循环的<h1>前加空格并保留其后末尾空格？

一、在v-for渲染的

有几种简单可行的方式：

• 直接用空格实体：在插值表达式前添加 实体，确保空格被浏览器识别：

  <div v-for="x in list" :key="x">
    <h1>&nbsp;{{ x }}</h1>
  </div>
  

• CSS样式控制（推荐）：通过padding-left或text-indent给
  设置间距，不影响内容结构且更灵活：

  <style>
    h1 {
      padding-left: 1em; /* 也可使用 text-indent: 2em; 实现缩进效果 */
    }
  </style>
  
  <div v-for="x in list" :key="x">
    <h1>{{ x }}</h1>
  </div>
  

二、强制保留

HTML默认会合并连续空格、忽略多余末尾空格，可通过以下方法解决：

• 替换为空格实体 ：把需要保留的空格换成 ，浏览器会将其解析为单个空格字符：

  <div v-for="x in list" :key="x">
    <h1>{{ x }}</h1>&nbsp;|&nbsp;
  </div>
  

• 使用CSS的white-space属性：给循环的div添加样式，让浏览器保留原始空格和换行：

  <style>
    .list-item {
      white-space: pre-wrap;
    }
  </style>
  
  <div v-for="x in list" :key="x" class="list-item">
    <h1>{{ x }}</h1> | 
  </div>
  

内容的提问来源于stack exchange，提问作者Sam