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(' ')

结果：

results of error message

* 我在 Mac OS.

Answer 1

浏览器将文本内容中的所有白色space 压缩为单个 space，您不能在正常（小胡子）插值中包含 HTML 个实体。你需要 the v-html directive.

<div v-html="rawHtml"></div>
The contents of this div will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored.

因此您必须修改通知组件以使用 v-html，然后再使用 #5。

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

JS(vue.js), How can i use linefeed? (\n)

javascript

linefeed

vue.js