Vue中如何插入换行符并正确渲染文本中的HTML内容？

原有写法不生效核心有两点：

• Vue的{{ }}文本插值默认会对内容做HTML转义，所有拼接在字符串里的标签都会被当成普通文本渲染，不会解析为DOM元素
• 你代码里写的<br>本身是转义后的字符，就算不被二次转义也只会显示为<br>文本，不会产生换行效果

提供两种常用实现方式，可根据场景选择：

方案1：v-html指令渲染（仅用于可信内容场景） #

该方式会让Vue直接把字符串作为HTML解析渲染，注意：只可在内容完全可信、无用户可控输入拼接的场景使用，避免XSS注入风险
首先修改拆分函数，直接返回带真实<br>标签的字符串，不要做转义：

const separateFirstFourWords = (words) => {
  return `${words.substring(0, 4)}<br>${words.substring(4)}`;
};

模板部分替换原有插值语法，改用v-html绑定渲染内容：

<p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p>

方案2：模板原生渲染（推荐，无安全风险） #

不需要把HTML标签拼接在字符串里，直接在Vue模板里控制DOM结构，是更符合框架设计思路的写法，完全没有XSS隐患：
如果逻辑简单可以直接在模板内写判断，拆分内容中间直接插入原生<br>标签：

<p>
  <template v-if="something">comeoutside</template>
  <template v-else>
    {{ 'comeoutside'.substring(0,4) }}<br>{{ 'comeoutside'.substring(4) }}
  </template>
</p>

如果需要复用拆分逻辑，也可以通过计算属性返回拆分后的内容数组，模板直接取值渲染即可，动态传入的字符串只需要替换掉例子里硬编码的'comeoutside'就能适配：

// 脚本部分
const splitWords = computed(() => {
  const targetStr = 'comeoutside' // 替换为你实际接收到的字符串变量
  if (something.value) return [targetStr]
  return [targetStr.substring(0,4), targetStr.substring(4)]
})

<!-- 模板部分 -->
<p>
  {{ splitWords[0] }}
  <br v-if="splitWords.length > 1">
  {{ splitWords[1] ?? '' }}
</p>

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