vue div contenteditable @input

Vue.js 中的 `div` 元素加上 `contenteditable` 属性通常用于创建可编辑区域，允许用户直接在网页上修改内容。当用户在该元素内输入文本时，我们可以使用 `@input` 事件监听器来响应用户的实时输入。这个 `@input` 是 Vue 自定义指令，它会在每次输入内容发生改变时触发。

例如：

<div v-model="editableContent" contenteditable="true" @input="handleInput"></div>

在这个例子中：
- `v-model` 是 Vue 的双向数据绑定，它将 `editableContent` 数据与 `div` 的内容关联起来。
- `contenteditable="true"` 表示该元素变为可编辑状态。
- `@input="handleInput"` 定义了一个名为 `handleInput` 的函数，每当用户输入内容时，这个函数会被调用，你可以在这里获取到新的输入值并处理相应业务逻辑。

`handleInput` 函数示例：

data() {
  return {
    editableContent: ''
  };
},
methods: {
  handleInput(e) {
    this.editableContent = e.target.innerText; // 获取当前输入的内容
    // 这里可以对输入内容做进一步处理...
  }
}