vue3获取 div 内编辑的内容

在 Vue.js 3 中，如果你想要获取某个 `div` 元素内用户编辑的内容，你可以通过绑定事件监听器，并利用 Vue 的响应式特性来达到目的。以下是一个基本的示例：

1. 首先，你需要将需要监听内容变化的 `div` 元素设置为一个 Vue 实例的模板的一部分，并给它添加一个 `v-model` 属性，例如一个 `<textarea>` 或者自定义组件：

<template>
  <div id="editor">
    <textarea v-model="content" @input="onContentChange"></textarea>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const content = ref('');

// 监听输入事件
function onContentChange(e) {
  // e.target.value 就是当前文本框内的值
  console.log('用户输入:', e.target.value);
}
</script>

在这个例子中，当你在 textarea 中输入内容时，`onContentChange` 函数会被触发，`e.target.value` 将包含最新的编辑内容。

相关问题

vue怎么用div封装一个富文本编辑器

你可以使用 Vue 组件来封装一个富文本编辑器，其中可以使用 div 元素来展示编辑器内容。以下是一个使用 div 封装富文本编辑器的示例：

<template>
  <div class="editor" contenteditable="true" @input="handleInput"></div>
</template>

<script>
export default {
  name: 'RichTextEditor',
  methods: {
    handleInput(event) {
      // 处理编辑器内容的变化
      console.log(event.target.innerHTML);
    }
  }
}
</script>

<style>
.editor {
  border: 1px solid #ccc;
  min-height: 200px;
  padding: 10px;
}
</style>

在这个示例中，我们使用了一个 div 元素来展示编辑器内容，设置了 `contenteditable` 属性来使其可编辑。通过监听 `input` 事件，我们可以获取到编辑器内容的变化，并进行相应的处理。

vue如何获取编辑之前的值

在Vue中，可以通过watch来监听数据的变化，从而获取编辑之前的值。

例如：

<template>
  <div>
    <input v-model="text" />
    <button @click="onSubmit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  watch: {
    text(newVal, oldVal) {
      console.log('编辑之前的值：', oldVal)
    }
  },
  methods: {
    onSubmit() {
      // 提交操作
    }
  }
}
</script>

在上面的代码中，我们通过watch来监听text这个数据的变化，当它发生变化时，会执行回调函数，并将新值和旧值传递给回调函数。在回调函数中，我们可以获取到编辑之前的值，并进行相应的处理。