javascript - .join ("\n") 未使用 Vue CLI 在 JavaScript 数组中创建新行

Question

我试图在数组“texts”中第一个项目的空格之间插入换行符，但 .split 和 .join 不会影响输出。我正在使用 Vue cli、gridsome 和 tailwindCSS。

我的方法针对数组中单词之间的空格来创建新行，这种方法是否有效，或者我是否需要重写 html 和 JavaScript 循环？

<template>
  <div id="content">
    <transition name="fade" mode="out-in">
      <p class="text-4xl py-3 text-center bg-egg-100 text-white px-3" :key="index">{{ text }}</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Intro',
  computed: {
    text: function() {
      return this.texts[this.index].split(" ").join("\n");
    }
  },
  data() {
    return {
      index: 0,
      texts: [
        'ABC DEF HIJ',
        'Alphabet'
    ]}  
  },
  created() {  
    this.startInterval();
  },
  methods: {
    startInterval: function() {
      setInterval(() => {
        this.index++;
        if (this.index >= this.texts.length)
        this.index = 0;
      }, 3500);
    }
  }  
}
</script>

<style>
#content {
    font-family: 'IPAex明朝';
}

.fade-leave-active {
  transition: opacity 1s ease-in;
  transition-duration: .5s;
}

.fade-enter-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.fade-enter, .fade-leave-to {
  opacity: 0.0;
}

.fade-leave, .fade-enter-to {
  opacity: 1.0;
}
</style>

Answer 1

默认情况下，HTML 中会忽略换行符和连续空格。如果您希望呈现换行符，则需要设置 white-space该元素上的 CSS 样式为 pre-wrap 之类的值。

请勿使用 v-html，因为这容易受到 XSS 的影响。攻击。始终避免 v-html 除非您有充分的理由使用它。