Vue.js创建首个视图时模板内容显示异常问题咨询

看起来你遇到的是Vue里HTML元素没按预期渲染换行的问题，我来帮你分析下可能的原因和解决办法：

1. 先排查CSS样式问题（最常见） #

你的模板里用了<p>、<address>这些块级元素，它们默认应该自动换行，但如果全局样式或者组件内样式把它们改成了行内元素，就会导致内容挤在一起。

你可以检查下有没有类似这样的样式：

p, address {
  display: inline; /* 或者 inline-block */
}

如果有的话，把它改回默认的块级显示，或者直接重置样式：

p, address {
  display: block;
  margin: 1em 0; /* 可选，加一点上下间距更美观 */
}

2. 确认模板写法是否规范 #

Vue单文件组件的<template>里直接写HTML标签是会正常解析的，但要注意：

• Vue2要求模板只能有一个根元素，所以最好把所有内容包在一个<div>里（Vue3支持多根，但加根元素更稳妥）
• 检查有没有标签未闭合的情况（你写的Adresss是拼写错误，但不影响渲染）

整理后的模板可以改成这样：

<template>
  <div>
    <p>Welcome to MyWebsite</p>
    <p>These terms and conditions outline the rules and regulations for the use of MySite Website.</p>
    <br />
    <span style="text-transform: capitalize;">MySite</span> is located at:<br />
    <address>
      Address, City<br />
      State - 00000, USA
    </address>
  </div>
</template>

3. 排除文本插值的错误用法 #

如果你不是直接在<template>里写HTML，而是通过{{ }}或者v-text输出这段内容，Vue会把HTML转义成纯文本，导致标签失效。比如这种错误写法：

<template>
  <div>{{ termsContent }}</div>
</template>
<script>
export default {
  data() {
    return {
      termsContent: '<p>Welcome to MyWebsite</p><p>These terms...</p>'
    }
  }
}
</script>

这种情况要换成v-html来渲染原始HTML：

<template>
  <div v-html="termsContent"></div>
</template>

按照上面的步骤排查，应该就能解决内容不换行的问题啦！

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