Vue换行符详解(vue中换行符不换行)

一、Vue换行符号

在Vue中，换行符可以有多种表示方法，包括常见的”n”、”r”、”rn”等，还可以使用特殊的符号” ”表示。这些换行符号在Vue中的应用很广泛，例如：

<template>
  <div>
    {{ message + 'n' + 'world' }}
  </div>
</template>

上述代码中，我们在message和”world”之间插入了一个”n”来实现换行的效果。

此外，在Vue中，也可以使用 <br>标签来实现换行效果，例如：

<template>
  <div>
    {{ message }}<br>
    world
  </div>
</template>

需要注意的是，通过 <br>标签实现的换行，需要在末尾加上”<br>”，否则会在结尾处产生多余的空行。

二、Vue换行

Vue中还有一种特殊的换行，即v-html指令中的换行。当我们用v-html指令来渲染一段html代码时，字符串中的”n”会被解析为换行符。例如：

<template>
  <div v-html="htmlCode"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlCode: "<h1>Hellonworld</h1>"
    };
  }
};
</script>

上述代码会将 <h1>Hello 和 world 分别放在两行中。

三、Excel换行符

Excel中的换行符为”rn”，我们可以在Excel中使用文本编辑器查看。

<template>
  <div>
    {{ message.replace('n', 'rn') }}
  </div>
</template>

上述代码中，我们通过 replace()方法将”n”替换为Excel换行符”rn”，实现了在Vue中生成Excel格式的文字换行。

四、Vue字符串换行

在Vue模板中书写长字符串时，我们可以使用 “”将其拆分成多行进行书写，例如：

<template>
  <div>
    {{ '这是一句很长很长的话，' +
       '为了避免一行显示不下，' +
       '拆分成了三行。' }}
  </div>
</template>

上述代码中，我们用 “+”将三行字符串拼接在了一起，实现了长文本的分行显示。

五、Excel替换换行符

有时，我们需要将一个Excel文件中的换行符替换为Vue中的换行符，我们可以借助JS实现，例如：

function excelToVue(str) {
  return str.replace(/n/g, '\n');
}

以上代码中，我们使用 replace()方法，将Excel格式的换行符”n”替换为Vue格式的”n”。