vue实现换行回车
Vue 实现文本换行和回车处理
在 Vue 中处理换行和回车通常涉及文本渲染、输入框处理或富文本编辑场景。以下是几种常见实现方式：
使用 v-html 渲染换行符
将文本中的 \n 替换为 <br>，并通过 v-html 渲染：
<template>
<div v-html="formattedText"></div>
</template>
<script>
export default {
data() {
return {
rawText: '第一行\n第二行\n第三行'
}
},
computed: {
formattedText() {
return this.rawText.replace(/\n/g, '<br>')
}
}
}
</script>处理文本域输入的回车
监听 textarea 的输入事件，处理回车键：
<template>
<textarea
v-model="content"
@keydown.enter="handleEnter"
></textarea>
<div v-html="displayContent"></div>
</template>
<script>
export default {
data() {
return {
content: ''
}
},
computed: {
displayContent() {
return this.content.replace(/\n/g, '<br>')
}
},
methods: {
handleEnter(e) {
if (!e.shiftKey) {
e.preventDefault()
this.content += '\n'
}
}
}
}
</script>CSS 保留空白和换行
使用 CSS 的 white-space 属性直接显示换行：
<template>
<div class="preserve-whitespace">{{ multilineText }}</div>
</template>
<script>
export default {
data() {
return {
multilineText: '保留换行的文本\n第二行\n第三行'
}
}
}
</script>
<style>
.preserve-whitespace {
white-space: pre-wrap;
}
</style>富文本编辑器集成
集成第三方富文本编辑器如 Quill 或 TinyMCE：
<template>
<quill-editor v-model="content" />
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
components: { quillEditor },
data() {
return {
content: ''
}
}
}
</script>正则表达式处理多空格
替换多个连续空格为 并保留换行：
formatText(text) {
return text
.replace(/ /g, ' ')
.replace(/\n/g, '<br>')
}根据具体需求选择合适的方法，v-html 需注意 XSS 风险，富文本编辑器适合复杂场景，CSS 方案最简单但功能有限。
