.join( "n" ) 不使用 Vue CLI 在 JavaScript 数组中创建新行

Question

我正试图在数组"text"中第一个项的空格之间插入换行符，但.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-spaceCSS样式设置为类似pre-wrap的值。

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

Answer 2

这是因为您在HTML中使用的输出恰好忽略了空白字符，并将它们归结为一个空格。要模拟换行符，您应该执行以下操作：

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