Question

我正在尝试在数组“文本”的第一项之间插入换行符，但是.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。

.join（“ \ n”）未使用Vue CLI在JavaScript数组中创建新行

2 个答案: