可编辑div实时获取用户输入

引言

根据业务需求在使用vue制作富文本编辑器过程中，将div设置为可编辑状态。

<div contenteditable="true"></div>    

 此时需要实时获取用户输入内容，v-model无法使用在div中。

正文

采用v-html和@input监听用户输入实现数据双向绑定，代码如下：

<div class="innerBox" 
     contenteditable="true" 
     v-html="item.value" 
     @input="item.value=$event.target.innerHTML"></div>

这样就可以实时获取用户输入了。