javascript - 如何插入换行符，在 VUE 中为文本呈现 html？

Question

我有一个字符串像这样进入前端 comeoutside

但是在 html 中我需要用条件渲染它

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

<p>{{something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')}}</p>

如你所见，我想将这两个词分开，并希望在这些词之间有一个换行符我怎样才能在 VUE 中实现这一目标

Answer 1

你可以为此使用 v-html 指令:

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

这会将三元运算符的结果呈现为 HTML。

注意这可能产生的跨站点脚本漏洞，请参阅 v-html documentation 中的警告.