<div id="app">
  <main>
    <div v-text='message'></div>
    <div v-html="'&nbsp;&nbsp;&nbsp;&nbsp;啊&nbsp;&nbsp;这里是一段文字并使用Unicode转义的空格；'">
    </div>
    <div v-html="'　　这里是一段全角文字，所以开头的空格是可以看到的；'">
    </div>
    <div v-html="'   这里是一段半角文字，所以开始的空格是看不到的；'">
    </div>
    <div style='white-space:pre' v-html="'    这里是用css样式 white-space:pre 来控制开头空格显示；'"></div>
    <pre v-html="'    这里使用 pre 标签来显示开始的空格空格，但是并不推荐。'"></pre>
  </main>
  <div>
    附：&lt;pre&gt; 标签内不能包含 &lt;p&gt; 标签等导致段落断开的标签 <a href="https://www.w3school.com.cn/tags/tag_pre.asp" target="_blank">点击查看<a>
  </div>
</div>

main
  border 1px solid red
  margin 10px
body
  line-height 2
  font-size 15px
  font-family 'microsoft yahei'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})