当前位置：首页 > VUE

vue实现点击换行

2026-03-29 03:44:29VUE

Vue 实现点击换行的方法

在 Vue 中实现点击换行功能，可以通过监听点击事件并动态修改文本内容来实现。以下是几种常见的实现方式：

使用 `v-model` 和 `@click` 绑定

通过 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>

使用 `contenteditable` 属性

通过 contenteditable 属性使元素可编辑，并在点击时插入换行符。

<template>
  <div>
    <div 
      contenteditable="true" 
      @click="insertNewLine"
      v-html="content"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '点击添加换行'
    }
  },
  methods: {
    insertNewLine() {
      this.content += '<br>'
    }
  }
}
</script>

动态渲染换行符

如果需要将换行符渲染为 HTML 的 <br> 标签，可以使用 v-html 或过滤器。

<template>
  <div>
    <textarea v-model="text" @click="addNewLine"></textarea>
    <div v-html="textWithBreaks"></div>
  </div>
</template>

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

使用 `pre` 标签保留换行符

pre 标签会保留文本中的换行符和空格，适合显示多行文本。

vue实现点击换行

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

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