空白:在Vue中将文本作为道具传递时，预换行不起作用

<template>
  <div v-html="text"></div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段带有<br>换行标签的文本'
    }
  }
}
</script>

<template>
  <div class="text-wrapper">{{ text }}</div>
</template>

<style>
.text-wrapper {
  white-space: pre-line; /* 或者 white-space: pre-wrap; */
}
</style>

<script>
export default {
  data() {
    return {
      text: '这是一段带有换行符的文本\n换行符会被保留'
    }
  }
}
</script>

<template>
  <div>{{ text | newline }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段带有换行符的文本\n换行符会被替换为<br>标签'
    }
  },
  filters: {
    newline(value) {
      return value.replace(/\n/g, '<br>')
    }
  }
}
</script>