如何让函数返回的多行字符串出现在Vue模板的多行中？答案

【问题标题】：How to let a multiline string returned by a function appear on multiple lines in a Vue template?如何让函数返回的多行字符串出现在Vue模板的多行中？
【发布时间】：2021-11-26 13:08:43
【问题描述】：

相当简单，但无法让它工作。

我的方法返回${a}-${b}，在我的模板中返回<td>{{ myFunction() }}</td>

所以现在它在我的单元格中返回 A-B。我想回来 A 然后 B 在一个新的行上。我试过${a}\n${b} 或\n\，但它似乎不起作用。

有什么建议吗？

谢谢

【问题讨论】：

console.log(`${a}\n${b}`) 这会在 a b 之间添加新的一行。
我同意，但在我的方法返回时并非如此。在我的模板中，${a}\n${b} 在一行上返回 A B。不知道我是否应该更改这个的 html 或 js

标签： javascript html vue.js

【解决方案1】：

在 Vue 中，您正在对 HTML 模板进行操作。

所以你应该使用<br/> 而不是\n

而不是使用<td>{{ myFunction() }}</td> 您可以使用：

<td :html="myFunction()"></td>

注意：您必须确保您信任myFunction 的输出不包含恶意代码（XSS 攻击）

【讨论】：

这是有道理的。 ${a}
${b} 返回 A
B，我错过了什么吗？
尝试添加v-html directive
@GuillaumeBB 那是因为它被转义了。
好吧，关于 v-html。像魅力一样工作，谢谢！