Vue -如何将&#10；添加到组件的支柱中

Question

我想在组件的道具中添加一个中断行，但当我这样做时，我会得到一个错误。

有人有解决办法吗？

代码：

<template>
  <section class="w-screen h-screen bg-slate-700 grid place-items-center">
    <div class="mb-12">
      <div class="text-8xl">Title</div>
      <div class="m-8 text-center text-3xl">
        <Writer
          :array="[
            'Code 1',
            'line 1&#10; line 2',
          ]"
          :typeSpeed="100"
          :iterations="1"
        />
      </div>
    </div>
  </section>
</template>

Answer 1

您可以在字符串中使用\n字符，然后在消费元素中使用css white-space属性。

这里是一个有用的例子。

在Writer父级上，对新行使用\n字符，如：

<Writer
  :array="[
    'Code 1',
    'line 1\n line 2',
   ]"
   :typeSpeed="100"
   :iterations="1"
/>

在Writer组件中，应该将white-space属性添加到您的css元素中，如下所示：

<template>
  <div 
    class="break-lines" 
    v-for="arrayElement in array">
      {{ array Element }} 
    </div>
</template>
<style>
  .break-lines {
    white-space: break-lines;
  }
</style>

(这应该行得通;)