vue element-ui中的this.$notifiy()中的message,怎么让里面的变量用换行符分开

在 Vue 使用 ElementUI 的 this.$notify() 方法时,若在消息内容中插入变量并使用换行符来分隔它们,可以利用 HTML 的换行标签
来实现。由于 this.$notify() 默认将 message 属性作为纯文本处理,我们需要通过设置 dangerouslyUseHTMLString 属性为 true 来告诉 ElementUI 的消息内容是 HTML 字符串,这样 HTML 标签才会被正确解析。

下面是一个示例代码,展示了如何使用换行符来分隔 this.$notify() 中的变量:

export default {
  methods: {
    notifyWithLineBreaks() {
      const var1 = '这是第一行';
      const var2 = '这是第二行';

      this.$notify({
        title: '通知标题',
        message: `${var1}
${var2}`
, dangerouslyUseHTMLString: true, // 允许 message 解析为 HTML type: 'success' }); } } }

在这个例子中:

  1. var1 和 var2 是将要在通知中展示的变量。
  2. message 属性中,我们使用模板字符串将变量和
    标签组合起来,来创建带有换行的消息内容。
  3. 设置 dangerouslyUseHTMLString: true 是必须的,因为它允许 message 里的 HTML 标签被解析。但要注意,如果消息内容包含用户输入,这可能会导致 XSS 攻击

你可能感兴趣的:(vue.js,前端,javascript)