JS（vue.js），我如何使用换行符？ (\n)

Question

我在 Vue.js 中通过通知发出错误消息。

教程演示： https ://admin.vuebulma.com/#/components/notification

教程代码： https ://github.com/vue-bulma/vue-admin/blob/master/client/views/components/Notification.vue

openNotificationWithType: function (type) {
  openNotification({
    title: 'Error',
    message: 'Hello\nWorld',
    type: type
  })
}

在这段代码中，当我在字符串中使用 \n 时，它不会将其呈现为换行符。

所以我一直在寻找如何在 JS 中应用换行，但我无法准确回答。

我在下面试过：

1)

 message: `Hello
 World`

2)

 message: 'Hello' + 
 '' + 'World'

3)

 message: 'Hello'
 + 'World'

4)

 message: 'Hello' + '\n' + 'World'

5)

 message: 'Hello<br/>World'

6)

 message: 'Hello<br>World'

7)

 message: `Hello \
 World`

8)

 message: [`Hello`,
           `World`].join(' ')

结果：

错误信息的结果

* 我在 Mac OS 中。

Answer 1

浏览器将文本内容中的所有空格压缩为一个空格，并且您不能在正常（小胡子）插值中包含 HTML 实体。 您需要v-html指令。

 <div v-html="rawHtml"></div>

此div的内容将替换为rawHtml属性的值，解释为纯 HTML - 数据绑定被忽略。

因此，您必须修改通知组件以使用v-html ，然后将 #5 与它一起使用。