当前位置：首页 > VUE

vue实现点击换行

2026-03-08 16:41:40VUE

在Vue中实现点击换行功能可以通过多种方式实现，以下是几种常见的方法：

使用v-model和文本处理

通过绑定输入框的值，并在点击事件中手动添加换行符（\n）。

<template>
  <div>
    <textarea v-model="text" @click="addNewLine"></textarea>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    addNewLine() {
      this.text += '\n';
    }
  }
}
</script>

使用CSS控制换行显示

如果仅需在显示时换行，可以通过CSS的white-space属性实现。

<template>
  <div>
    <div @click="addText">点击添加内容</div>
    <div class="content">{{ content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    addText() {
      this.content += '新行内容\n';
    }
  }
}
</script>

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

动态渲染带换行的HTML

使用v-html指令渲染包含<br>标签的内容。

<template>
  <div>
    <button @click="addLine">添加换行</button>
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: ''
    }
  },
  methods: {
    addLine() {
      this.htmlContent += '新行内容<br>';
    }
  }
}
</script>

处理多行文本输入

对于需要用户输入多行文本的场景，直接使用<textarea>元素即可支持换行输入。

vue实现点击换行

<template>
  <div>
    <textarea v-model="multiLineText" placeholder="输入多行内容..."></textarea>
    <p style="white-space: pre-line;">{{ multiLineText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multiLineText: ''
    }
  }
}
</script>