.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中使用的输出恰好忽略了空格字符，并将它们归结为一个空格。要模拟换行符，应执行以下操作：

return this.texts[this.index].split(" ").join("<br/>");

Answer 2

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

不要使用v-html，因为它容易受到XSS攻击。一定要避免使用v-html，除非你有充分的理由使用它。