vue实现换行回车

Vue 中实现换行和回车的方法

在 Vue 中，可以通过多种方式实现换行和回车功能，具体取决于应用场景和需求。

使用 v-html 指令渲染换行符

当需要将包含换行符的字符串渲染为 HTML 时，可以使用 v-html 指令。将换行符 \n 替换为 <br> 标签。

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

<script>
export default {
  data() {
    return {
      text: '第一行\n第二行\n第三行'
    };
  },
  computed: {
    formattedText() {
      return this.text.replace(/\n/g, '<br>');
    }
  }
};
</script>

在文本区域中处理回车输入

对于 <textarea> 元素，回车键输入的换行符会自动保存为 \n。可以通过 v-model 绑定数据并在显示时处理换行符。

<template>
  <textarea v-model="inputText"></textarea>
  <div v-html="displayText"></div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  computed: {
    displayText() {
      return this.inputText.replace(/\n/g, '<br>');
    }
  }
};
</script>

使用 CSS 保留换行符

通过 CSS 的 white-space 属性，可以保留文本中的换行符和空格，无需替换为 <br> 标签。

<template>
  <div class="preserve-newlines">{{ text }}</div>
</template>

<style>
.preserve-newlines {
  white-space: pre-line;
}
</style>

在输入框中捕获回车事件

可以通过 @keyup.enter 监听回车键事件，执行特定操作。

<template>
  <input @keyup.enter="handleEnter" v-model="inputText" />
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    handleEnter() {
      // 处理回车键逻辑
      console.log('回车键被按下');
    }
  }
};
</script>

使用 pre 标签保留格式

<pre> 标签会保留文本中的所有空格和换行符，适合显示预格式化的文本。

<template>
  <pre>{{ text }}</pre>
</template>

以上方法可以根据具体需求选择使用，灵活处理 Vue 中的换行和回车问题。