如何在多行<v-text-field>中保留换行格式？

当然能保留换行符啦！我之前也碰到过一模一样的问题，其实就是两个小环节没处理到位，搞定它们就行：

1. 先让v-text-field支持多行输入 #

默认情况下，v-text-field是单行输入框，用户按Enter只会触发提交，不会生成换行符。你需要给它加上multiline属性，开启多行输入模式，最好再搭配auto-grow让输入框自动适应内容高度，体验更好：

<v-text-field
  v-model="userDescription"
  label="请输入描述"
  multiline
  auto-grow
></v-text-field>

这样用户输入时按Enter产生的换行，就会以\n的形式被保存到你的userDescription数据变量里了。

2. 展示时让换行生效 #

虽然数据里已经有\n了，但直接用{{ userDescription }}渲染的话，HTML会把换行符当成普通空格，看不到换行效果。这里有两种常用的解决办法：

方法一：用<pre>标签保留原始格式 #

<pre>标签会完全保留文本的原始格式（包括换行、空格），适合需要严格保留输入格式的场景：

<pre>{{ userDescription }}</pre>

方法二：用CSS样式实现优雅换行 #

如果不需要保留多余的空格，只想让换行生效，推荐用white-space: pre-line这个CSS属性，它会识别\n并换行，同时合并连续的空格，更符合普通文本的展示需求：

先写个CSS类：

.text-with-line-breaks {
  white-space: pre-line;
}

然后在模板里使用：

<p class="text-with-line-breaks">{{ userDescription }}</p>

额外小技巧：手动转换换行符（谨慎使用） #

如果有特殊需求，你也可以把数据里的\n转换成HTML的<br>标签，然后用v-html渲染，但要注意只有当内容是完全可信的（比如内部用户输入）时才用这个方法，避免XSS攻击：

<p v-html="userDescription.replace(/\n/g, '<br>')"></p>

总结一下：先给v-text-field加multiline让输入保留换行符，再通过<pre>或CSS样式让换行在展示时生效，这样数据里的换行就完全保留住啦！

内容的提问来源于stack exchange，提问作者WoJ