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

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

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

     

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

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