Question

我想使用v-alert来显示可能从api服务器返回的错误消息，但是我需要显示多行内容，而且似乎无法正常工作。

我尝试过的事情：

在v-alert中使用<pre>块，但它看起来像是带有速递符的等宽字体。

在v-alert内容中的静态文本中手动放置一个换行符<br/>是可行的，但是如果我然后尝试将其绑定到相同字符串的data属性，这会导致显示{{1} }（即<br/>）。

我已经尝试过使用"test line one<br/>test line two"样式的警报中的div块，但这还是行不通。

任何有关如何在此组件中显示多行的想法都很受赞赏。

Answer 1

尝试使用v-html指令。

https://vuejs.org/v2/guide/syntax.html#Raw-HTML

此代码有效

HTML代码：

<div id="app">
  <v-app id="inspire">
    <div>      
      <v-alert
        :value="alert"
        type="success"
        transition="scale-transition"
      >
        <span v-html="datas"></span>
      </v-alert>
    </div>
  </v-app>
</div>

JavaScript代码：

new Vue({
  el: '#app',
  data () {
    return {
      alert: true,
      data1: 'Hello',
      data2: 'World!'
    }
  },
  computed: {
    datas() {
      return this.data1 + ' <br> ' + this.data2;
    }
  }
})

Answer 2

您可以在v-alert中添加一个类，并将其设置为在CSS中使用white-space: pre-line，例如

<v-alert
  :value="true"
  type="success"
  class="multi-line"
  >This is a
  success alert.</v-alert>

.multi-line {
  white-space: pre-line;
}

请不要在文本之前或之后放置任何换行符。

演示〜https://codepen.io/anon/pen/WWQvqO

v-警报显示多行文字？

2 个答案: