昨天的工作中遇到了这样一个问题.场景是这样的:与一个第三方合作,对方将页面以及数据处理写好了给我们,但是技术栈不一样,对方是直接使用bootstrap+jquery+layer.js 来构建了两个页面.其中一个地方有大致如下代码:

var num = $("#div1").text()

这里是通过jQuery来获取div中的内容,但这里的div是有 contenteditable 这个属性的.大家都知道,具有这个属性的元素是可编辑的.但我们自己的项目是使用vue进行数据的双向绑定的,而我又不想使用input来代替它原本的div元素.那么此时的情况应该如何在可编辑元素上实现数据双向绑定呢?解决方案如下:

// template部分
<div contenteditable v-html="divMsg" @input="inputDiv($event)"></div>

// js部分
const divMsg = ref('')
const inputDiv = e => {
  divMsg.value = e.target.innerHTML
}
retuen {
  divMsg,
  inputDiv
}

这里因为我使用了的 @vue/composition-api 来提前感受一波vue的组合api写法,所以vue的写法可能和2.x版本有所不同,但思路是一模一样的.自此,问题得以解决.