实现代码如下:
html
<template>
<div style="border: 1px solid red;" contenteditable="true" @input="updateContent">{{editableContent}}</div>
<el-input class="" v-model="editableContent"></el-input>
</template>
javascript
<script>
export default {
data() {
return {
content: ''
}
},
computed: {
editableContent: {
get() {
return this.content;
},
set(value) {
this.content = value;
}
}
},
methods: {
updateContent(event) {
this.content = event.target.innerText;
}
}
}
</script>
此处修改input框中的字符并不会联动到可输入div标签内容的时时更新。