主要给大家介绍了利用vue2如何实现div contenteditable="true"，就是类似于v-model的效果，文中给出了两种解决的思路，对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。
在Vue2中，由于内置的v-model指令不适用于`contenteditable`属性的div元素，我们需要寻找其他方式来实现类似的功能。本篇文章将介绍两种解决思路，帮助开发者在Vue2项目中实现在div上实现双向数据绑定，模拟v-model的效果。
**解决思路一：自定义指令**
在Vue1中，我们可以自定义一个双向数据绑定的指令来处理`contenteditable`的div。然而，这种方法在Vue2中已不再适用，因为Vue2中的一些API发生了变化。以下是一个在Vue1中可行的示例：
```javascript
Vue.directive('demo', {
twoWay: true,
bind: function () {
this.handler = function () {
this.set(this.el.innerHTML)
}.bind(this)
this.el.addEventListener('input', this.handler)
},
update: function (newValue, oldValue) {
this.el.innerHTML = newValue || ''
},
unbind: function () {
this.el.removeEventListener('input', this.handler)
}
})
```
尽管这个自定义指令在Vue1中有效，但在Vue2中，由于`twoWay`和相关方法已被移除，因此无法直接使用。
**解决思路二：使用组件**
在Vue2中，更推荐使用组件来实现`contenteditable`的双向数据绑定。我们可以创建一个名为`v-edit-div`的组件，处理内部数据并将其传递回父组件。以下是该组件的实现：
```html
<template>
<div contenteditable="true" v-html="innerText" @input="changeText"></div>
</template>
<script>
export default {
props: ['value'],
data() {
return { innerText: this.value }
},
methods: {
changeText() {
this.innerText = this.$el.innerHTML;
this.$emit('input', this.innerText);
}
}
}
</script>
```
在父组件中，我们可以通过`v-model`来使用这个组件：
```html
<template>
<div>
<v-edit-div v-model='text'></v-edit-div>
<span>{{text}}</span>
</div>
</template>
<script>
export default {
data() {
return {
text: '改一下试一试',
}
}
}
</script>
```
在这个组件中，我们监听`input`事件，当div内容改变时，`changeText`方法会被调用，更新组件内的`innerText`并触发一个自定义的`input`事件，将新值传递给父组件。父组件通过`v-model`接收到这个新值，并自动更新与`v-model`关联的数据。
**总结**
虽然Vue2的v-model不直接支持`contenteditable`的div，但我们可以利用组件和事件来模拟v-model的双向数据绑定功能。组件方法不仅更符合Vue2的设计哲学，而且易于理解和维护。通过这种方式，开发者可以在Vue2项目中实现`contenteditable`的div与数据的实时同步，确保用户体验的连贯性。如果在实际开发中遇到此类问题，可以参考上述解决方案。
